Complex Animations with Framer Motion & React || useAnimate Hook

Framer Motion is my favorite animation library by a long shot (you know that by know if you watch my videos, I won't shut up about it lol).

That said, using normal motion components has a big downside.

Orchestrating complex animations is super annoying.

Fortunately, Framer Motion gives us a SUPER simple hook to fix this problem.

Today we'll learn how we can leverage the useAnimate hook to build complex, multi-step, multi-element animations with Framer Motion and ReactJS!

🔗 My Links

[yajirushik]

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!

[naylord]

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

[AaronHongry]

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

[excalibur]

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

[mdrifat]

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

[mohammad]

Awesome explanation, keep up the quality work

[subhanshusj_jha]

Brilliant explanation i am going to Use that in a project

[crim-son]

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?

[FelipeSilvaMedeiros]

Great video and explanation. Thanks for share with us.

[rubenn]

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

[EricMalek]

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...

[ElNicopewpew]

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

[akshitagg]

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?

[rohit_]

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

[SuperRockcore]

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

[Thomaskbird]

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?

[goresometimes]

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' },
},
};

[BasicallyBasics]

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

[MuhammadAlam-necf]

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?

[itsdrvgo]

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