Check out my course called Next Level Next.js! A full stack course covering GraphQL, TypeScript, Apollo, Prisma, auth and lots more! next.leighhalliday.com
Great job Leigh. Framer Motion is a lot of work to figure out, documentation pretty but thin, and you did the toughest part simplifying it so much here. They badly need such a clear usage example as yours.
Great explanation! As others have mentioned there's a staggerChildren property too, but this is arguably simpler to implement as you don't need to set up a relationship between parent and child elements. Love the tip on applying different animations to even/odd indexed items too.
Hey Leigh, greate video. You can also shorthand transform properties with just x and y in framer motion and you can also use the staggerChildren property to set up stagger animations easier.
Kind of prefer this low-level implementation of a delay effect vs more API via `delayChildren`, `staggerChildren`, etc, but maybe I'm just not cozy enough with framer-motion. I'd love to see some more vids on framer-motion though!
Hi sir, nice tutorial thank u so much. i want to ask some thing, have you ever try to combine Variant Staggered Animation when "inView". can you make the tutorial please. Sorry my english not so good
Check out my course called Next Level Next.js! A full stack course covering GraphQL, TypeScript, Apollo, Prisma, auth and lots more! next.leighhalliday.com
Great job Leigh. Framer Motion is a lot of work to figure out, documentation pretty but thin, and you did the toughest part simplifying it so much here. They badly need such a clear usage example as yours.
Omg. 5 mins and knowledge worth of hours. Damn impressed by the way u taught it..
Glad it helped, Sagar :)
Great explanation! As others have mentioned there's a staggerChildren property too, but this is arguably simpler to implement as you don't need to set up a relationship between parent and child elements. Love the tip on applying different animations to even/odd indexed items too.
Thank you for a thorough, yet concise, explanation!
Great and straight to the point explanation.
Awesome. The staggerChildren prop couldn't work for me, but this did. Thanks!
Hey Leigh, greate video. You can also shorthand transform properties with just x and y in framer motion and you can also use the staggerChildren property to set up stagger animations easier.
Thanks Manos! I’m just learning as well, thanks for sharing!
ure a life saver...pls introduce more vids like this
wowowow I'm here for stackoverflow, i will try now, thx crack
Find searching for whole day i found this masterpiece thankyou ❤❤
Awesome. Thanks. hopefully there will be more vid about framer-motion.
Thanks Alfie! Anything in particular you'd like to see?
@@leighhalliday yeah, AnimationSharedLayout dan AnimationPresence, please. Thank you.
I've been looking for a simple solution like this for hours. Thanks man!!! ❤
Kind of prefer this low-level implementation of a delay effect vs more API via `delayChildren`, `staggerChildren`, etc, but maybe I'm just not cozy enough with framer-motion. I'd love to see some more vids on framer-motion though!
This video was worth watching. Thank you soo much for ❤❤❤❤❤❤
Awesome , thanks for this Leigh 🙌
Amazing quick video! Loved it.
Thanks Leigh.
Super cool. Thanks!
Really apreciated
There's a staggerChildren property in framer motion too..
Nice! I do these videos to learn, so mission accomplished :)
@@leighhalliday staggerchildren doesnt work when removing elements from dom animating them out but your method did, thanks saved me such a headache
very helpful
Need more video like this!
Do you have any playlist for Framer motion!
Very nice!
this helps a lot, thanks
Glad you enjoyed it!
Amazing tutorial, thank you do much.
Thank you for this video
you are awesome ^^
Can I use Staggered Animation with the useTransform hook? I wanted the animation time to be scrollbase but then the sttaggered stopped working
Nice video ☺
Thx !
I need to stagger animation that is on an exit prop. This animation only plays after the first so using staggerChildren is off. Maybe I can do this.
How do we use framer motion with bootstrap or material ui? Wrapping for example Card component with a motion.div?
Any guidelines for creating animations if it doesn't increase UX?
How do I trigger this for onScroll
Wow 💙
Hi sir, nice tutorial thank u so much. i want to ask some thing, have you ever try to combine Variant Staggered Animation when "inView". can you make the tutorial please.
Sorry my english not so good
i've tried to do this with staggerChildren for so long why didnt i try this before
hi, would see how to do Shimmer animation with framer motion like Facebook does for loading data :D
ty
good video, staggerChildren property def doesn't work
its cools and thanks for this
n1! ty.
Is framer motion free
It is!