You are AMAZING!!! Not even a seasoned pro who boasts to be in the web dev domain for the past 30 yrs could explain this as smoothly as you did.You are a gift from above!!!
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?
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?
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' }, }, };
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...
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?
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.
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!
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?
You are AMAZING!!! Not even a seasoned pro who boasts to be in the web dev domain for the past 30 yrs could explain this as smoothly as you did.You are a gift from above!!!
Your videos are so well-paced while being so informative omg THANK YOU :>
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?
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!
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' },
},
};
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!
Happy it helped!! 😁😁
How to set Initial values?
im trying to make a scale 0 to 1 to the div inside the sceropbut its not animating
Oh God!
This just made animating different components so easier....
Agreed! So useful haha
This is exactly what I needed for my project, thank you so much! Liked
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
Would you have to use forwardRef if passing to a component?
For scope.current i guess
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?
Appreciate it! Very well done, thanks Tom :D
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.
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!
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
Thanks so much tom🎉
Great video! Im trying to connect the animation start to scroll but alas, no luck yet!
EXTREMELY COOL TUTORIAL, thank you)
Awesome explanation, keep up the quality work
Thank you! 😁
How can we define initial state.
Brilliant explanation i am going to Use that in a project
body, youre a living legend
Thanks.. would never be able to figure this stuff out w/o ppl like you..
Great tutorial! Thank you 🙏
You're very welcome! 😁😁
It will be great if you make website using frame motion using multiple components
I could do that!
O my my.... Again thank you so very much for this video...💝💝
This is awesome! Thanks so much! 👏👏
Happy to help :)
Amazing explanation! Thank you
Glad it was helpful! 😁
Great video and explanation. Thanks for share with us.
Thank you!
Amazing stuff, thanks!
Love your face tom, please show it mmore often
Great video
On you website you have a wet paint button dripping
Could you make a video on how you do it ?
Possibly!
Thank you 💕
BLESS YOU, THANK YOU SO MUCH!!!!!!
This is sooooo good 🎉
thank you :)
Thank you
You’re welcome :)
i like your code
Thank you! :)
thanks for sharing
Thanks for watching! 😁
Wow muy buen video enserio, gracias por explicar este tema bien
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
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!