Complex Animations Shouldn't be SO Hard | Framer Motion + useAnimate
We will use the useAnimate hook from Framer Motion and create a complex animation.
⏳ Timestamps
00:00 - Introduction
00:32 - What we will build
01:44 - Setting up
04:34 - Animating
👨💻 Looking for a web developer job, visit: www.webdevjobs.io/
👽 Discord - / discord
👾 Code - github.com/sixfwa/subscribe-b...
#framermotion #reactjs #animations
Пікірлер: 16
This channel's gonna blow up...... Amazing content and great example
@iamrithmic
3 ай бұрын
Thanks a lot!
So cool!!!
@iamrithmic
3 ай бұрын
As always, thank you man!
@farzadmf
3 ай бұрын
Thank YOU for the great videos!
if only the docs had this example...
Great videos
@iamrithmic
3 ай бұрын
Thanks man!
Hey there! I've been thinking, what if we try something different instead of using async await? We could opt for a sequence array approach, like this: const sequence = [ ["ul", { opacity: 1 }, { duration: 0.5 }], ["li", { x: [-100, 0] }, { delay: stagger(0.1) }] ]; animate(sequence, { duration: 10 }); Also, regarding the hover state for buttons, instead of creating isCursorLoaded and setIsCursorLoader states, why not simply apply a Tailwind CSS class like opacity-0. I think it'll give our project a cleaner and cooler look. What do you think? 😊🚀
@iamrithmic
3 ай бұрын
Good stuff, but I think with the array we could be sacrificing readability and with the cursor, it still needs to be loaded. If I understood that last part correctly
👏👏👏👏👏
great tutorial man, loved it. was wondering whether you can explain how to do page transition with the app directory? I was looking all over for it but cant find one so far, are there any workarounds ?
Amazing content! may I ask what theme are you using? Thanks
Nice video!!!, is this like gsap timeline?
@iamrithmic
3 ай бұрын
Yes similar, but you don't have the structure that comes with GSAP
which color theme are you using