Complex Animations with Framer Motion & React || useAnimate Hook
ฝัง
- เผยแพร่เมื่อ 14 ต.ค. 2024
- Animated UI components for React, Tailwind CSS, Framer Motion & More ✨ www.hover.dev
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
TikTok: / tomisloading
Instagram: / tomisloading
GitHub: github.com/Tom...
Twitter: / tomisloading
Discord & more: linktr.ee/tomi...
Portfolio templates: tomisloading.g...
Website: www.hover.dev
Your videos are so well-paced while being so informative omg THANK YOU :>
Appreciate it! Very well done, thanks Tom :D
This looks super cool and with your walkthrough works like a charm.
Thank you so much for sharing!
Happy it helped!! 😁😁
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...
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!
This is exactly what I needed for my project, thank you so much! Liked
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?
Oh God!
This just made animating different components so easier....
Agreed! So useful haha
body, youre a living legend
EXTREMELY COOL TUTORIAL, thank you)
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?
I figured it out: it turns out iphone browsers require SVGs to have an explicitly set width property. working now!
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?
O my my.... Again thank you so very much for this video...💝💝
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.
Thanks so much tom🎉
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?
They can absolutely be within child components! 👍 as long as they’re rendered within the scope, they can be animated
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' },
},
};
Awesome explanation, keep up the quality work
Thank you! 😁
Great video! Im trying to connect the animation start to scroll but alas, no luck yet!
Thanks.. would never be able to figure this stuff out w/o ppl like you..
This is awesome! Thanks so much! 👏👏
Happy to help :)
Amazing stuff, thanks!
Great video and explanation. Thanks for share with us.
Thank you!
BLESS YOU, THANK YOU SO MUCH!!!!!!
Amazing explanation! Thank you
Glad it was helpful! 😁
Brilliant explanation i am going to Use that in a project
This is sooooo good 🎉
Great tutorial! Thank you 🙏
You're very welcome! 😁😁
How to set Initial values?
im trying to make a scale 0 to 1 to the div inside the sceropbut its not animating
Please what's the vs code theme you are using tell me
Do we need to always use a function to trigger the animations?
How do i trigger series of animation once my page refreshes?
then call it in useEffect
Thank you 💕
Would you have to use forwardRef if passing to a component?
For scope.current i guess
The way he said, "Hello, this is my face"... I just burst into laughter... XD... Great video btw
hahah same 🤣🤣
LOOOOL 😂
you're easily amused
It will be great if you make website using frame motion using multiple components
I could do that!
Love your face tom, please show it mmore often
thank you :)
Wow muy buen video enserio, gracias por explicar este tema bien
Thank you
You’re welcome :)
thanks for sharing
Thanks for watching! 😁
How can we define initial state.
Nice!
i like your code
Thank you! :)
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!