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

[@dhidhi1000]

if only the docs had this example...

[@asadansari8908]

This channel's gonna blow up...... Amazing content and great example

[@iamrithmic]

Thanks a lot!

[@farzadmf]

So cool!!!

[@iamrithmic]

As always, thank you man!

[@farzadmf]

Thank YOU for the great videos!

[@sohrabkhan101]

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]

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

[@godofwar8262]

Great videos

[@iamrithmic]

Thanks man!

[@digitalsahara6670]

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 ?

[@p1erceprc]

Amazing content! may I ask what theme are you using? Thanks

[@nanonkay5669]

👏👏👏👏👏

[@Foo678]

Nice video!!!, is this like gsap timeline?

[@iamrithmic]

Yes similar, but you don't have the structure that comes with GSAP

[@mayurbansal4051]

which color theme are you using