Complex Animations with Framer Motion & React || useAnimate Hook 

Your videos are so well-paced while being so informative omg THANK YOU :>

Thanks for this man! Since I discovered Framer Motion, I prefer it over GSAP. Too many steps to get GSAP to work and if you don't set it up right, it runs through all it's nodes before loading. That's a bad look for a developer...

This looks super cool and with your walkthrough works like a charm. Thank you so much for sharing!

I have wrote many animations with different ways, from transition / keyframes in basic CSS to GSAP and React Transition Group.. but.. the Framer Motion approach with useAnimate in my opinion is the best!

Oh God! This just made animating different components so easier....

hey this(useAnimate hook) is not working if the children are dynamically generated like after fetching from API and then mapping so is there a way to make it work?

This is exactly what I needed for my project, thank you so much! Liked

I appreciate you making these videos, because you explain things very well. However, I have a question: How can I run two animations simultaneously in an animation sequence and then continue the sequence? Do I skip the await for one of them? Or what is the best way to do this? This is how I did it before. const sequence: AnimationSequence = [ ['.animated__gallery-text', { opacity: 1 }, { duration: 0.8 }], ['.galleryt-1', { opacity: 0, maxHeight: 0 }, { duration: 1 }], ['.galleryt-2', { opacity: 1 }, { duration: 1 }], /*these should play simultaneously*/ ['.animated__gallery-text', { height: '100px' }, { duration: 1 }], ['.galleryt-2', { fontSize: '30px' }, { duration: 1, delay: -1 }], /*and this should play after them*/ ['.galleryt-2', { color: "red" }, { duration: 1}], ]; useEffect(() => { animate(sequence); }, []); So, with your version, it would look like this? Is this correct? So, for the animations that I want to run simultaneously, I should remove the await from all of them except the last one, right? const handleAnimate = async () => { await animate('.animated__gallery-text', { opacity: 1 }, { duration: 0.8 }); await animate('.galleryt-1', { opacity: 0 }, { duration: 1 }); await animate('.galleryt-2', { opacity: 1 }, { duration: 1 }); animate('.animated__gallery-text', { height: '100px' }, { duration: 1 }); await animate('.galleryt-2', { fontSize: '30px' }, { duration: 1 }); await animate('.galleryt-2', { rotate: 40 }, { duration: 1 }); await animate('.galleryt-1', { opacity: 1 }, { duration: 1 }); }; useEffect(() => { handleAnimate(); }, []); Thank you so much in advance.

EXTREMELY COOL TUTORIAL, thank you)

O my my.... Again thank you so very much for this video...💝💝

Thanks.. would never be able to figure this stuff out w/o ppl like you..

Great video! Im trying to connect the animation start to scroll but alas, no luck yet!

How would you incorporate staggerChildren into this and make it so that one set of animations triggers after another? I have these four variants and I'd like the sentence and letter variants to run and then the container and item variants to run after. Variants - const sentence = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { delay: 0.2, staggerChildren: 0.05, }, }, }; const letter = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { duration: 0.5, ease: 'easeInOut' }, }, }; const containerVariants = { hidden: { opacity: 1 }, visible: { opacity: 1, transition: { staggerChildren: 0.5, }, }, }; const itemVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { duration: 2, ease: 'easeInOut' }, }, };

Brilliant explanation i am going to Use that in a project

body, youre a living legend

BLESS YOU, THANK YOU SO MUCH!!!!!!

Please what's the vs code theme you are using tell me

Awesome video🎉🎉, pls is there a way to make offsets between the timelines? Like if you want the toggle button to animate sooner than it should, Or how to make two animations run concurrently?

The way he said, "Hello, this is my face"... I just burst into laughter... XD... Great video btw

How to set Initial values? im trying to make a scale 0 to 1 to the div inside the sceropbut its not animating

Awesome explanation, keep up the quality work

Tom, I used this to create an animation sequence I have been thinking about for a long time. It worked so perfectly, but when I deployed to prod I realized none of this worked in a mobile browser on my iphone and ipad :( i had to revert back to using a much simpler animation with just motion components with initial/animate/transition props (which worked just fine on iOS chrome and safari browser). Any idea what I might be doing wrong?

Thanks so much tom🎉

This is awesome! Thanks so much! 👏👏

It will be great if you make website using frame motion using multiple components

Great video and explanation. Thanks for share with us.

This is sooooo good 🎉

Amazing explanation! Thank you

Hey great video, I recently have been experimenting with motion and had the same exact feelings of how complex using motion components can be for very complex animation sequences or where you’d like some animations to be dependent on others. So this useAnimate hook demo is great, but I’m assuming this would only work if all elements that you’d like to animate are within the single component vs a bunch of child components or does that also work?

Great tutorial! Thank you 🙏

How can we define initial state.

Amazing stuff, thanks!

Do we need to always use a function to trigger the animations? How do i trigger series of animation once my page refreshes?

Thank you 💕

Would you have to use forwardRef if passing to a component?

Love your face tom, please show it mmore often

thank you :)

Thank you

Wow muy buen video enserio, gracias por explicar este tema bien

thanks for sharing

i like your code

Nice!

cool

Hey! Did text you in instagram dm and emailed about buying the subscription. Would truly appreciate the response. And thanks for the video again!