React Animations just got better

Check out my Full Stack Next 13 Course 🔥
developedbyed.com/
Come chat with me 👇
/ developedbyed
Today I want to share with you Framer Motion's new hook called useAnimate. Framer Motion is one of the most popular React animation libraries that allows you to do fancy animations via drag, scroll and more.
🛴 Follow me on:
Twitch: / developedbyed
Twitter: / developedbyed
Instagram: / developedbyed
Github: github.com/developedbyed/
Discord: t.co/NDJAFoHgoE
#programming

[@rohittomar4187]

We want a whole series on framer motion Please 🥺🥺

[@ObinnaAkahara]

Yes we do

[@renecaceres3925]

Pls pls

[@mrshahcloud]

Agreed!

[@kennedyfreitas7548]

yes indeed

[@codeVictor]

pleassseee🥹

[@blade2663]

Hey Ed, just wanted to say about 3-4 years ago, you got me into frontend, I now work at my second company as a full stack developer, Thank you!

[@navinkumarsahu1159]

can you recommend me please

[@developedbyed]

Do you like it or nah? 🤔🤔 I really think this could be great for orchestrating complex animations similar to GSAP's timeline with a couple of awaits in the function.

[@AlejandroDeLaRosa05]

Hello Ed, been going through your creative Front End series and I’m thankful for all the insights you provide✅ keep at it brother

[@yangdongjun]

great tutorials!

[@JS_Jordan]

I think this is great for creating stepped animations, like checking a user clicked something before proceeding to the next animation

[@padione3540]

Awesome video as always! Please consider making a quick video about the new Next 13.3 features Parallel Routes and Interception. That would be awesome since there is barely anything out there yet.

[@developedbyed]

Sounds like a fun video! I gatcha

[@HammadKhanYT]

I like your excitement. Keep it up and make such semi-pro videos!

[@hamzaanis2321]

Ed please upload more tutorial on framer motion maybe a series would be great 😊

[@developedbyed]

I'm up for it!

[@7ala9at]

thank u , can you make course use nextjs with laravel sanctum for authentication?

[@ekchills6948]

Hi sir, can you please do a next js 13 beginner course with the app directory. I've been trying to learn next js but I'm quite overwhelmed with all the different versions thank you (:

[@jfedererj]

NextJS breaking my app every day. Oh man, too real lol

[@LAVOTODGJORCE]

Great video! What do you think about react-spring as an animation library?

[@developedbyed]

yeah it's fantastic, I still prefer framer but that's just me 👍

[@abhijeetbrahmbhatt8135]

I literally caught off gaurd at 0:37 😂🤣🤣

[@ilirbajrami2902]

I like that you did an "exit animation" with the smoke at the very beginning :) but my exitAnimation from the code you got here is not triggered even thought i wrap my component in . Any idea why?

[@ayoubbsd2747]

That's goood, this hook will allows us to smoothly animate any value using an easing function

[@cooltv9943]

that'really amazing as always

[@anandoganiya9070]

Please give the link for that wallpaper its so cool

[@saketchandorkar1214]

Which extension are you using to auto recommend code ?

[@razdingz]

bro what vape u using ? and juice ?

[@Exiturn]

What sort of extension is the predictive code? Looks pretty useful to have

[@developedbyed]

It’s github copilot! Can’t lie it’s quite good 👍

[@defnotathot]

I'm a total noob with react animations, thanks for the recommendation!

[@tajko]

Hey Ed, can you do a tutorial on Sanity CMS and Next js 13 with typescript and framer motion?

[@developedbyed]

could be fun, have quite a few planned out for now

[@tajko]

@@developedbyed Yeahhhhhhh would love it man. With the latest stable APP directory would be fantastic! P.S. A tip would be please, don't do just a regular blog. But instead be different and have a homepage, about page and a blog page.

[@bassilmohammad7266]

Hi ed Will you update the react course ? And when you will update it ? Thank you ed ❤

[@developedbyed]

I'm gonna start working on it soon! ❣️

[@mostafakheder7721]

I like your way of teaching ❤

[@w1pe0ut]

how did you get index variable?

[@deepanshusharma8321]

Your all videos are like Gems 💎💎💎💎

[@rifhix7404]

Bro can you make a crush course about framer motion

[@HarshDoes]

We want Series on Framer Motion 🙌

[@mrprofessor2]

0:36 Nice Sound effect

[@avijitchanda7944]

Can anyone suggest in which KZbin channel i can get advance level mongodb knowledge

[@Jack-hk6kl]

At the first part of the video, how did you have exit animations without AnimatePresence? Is that no longer needed?

[@developedbyed]

still need to wrap the component with an Animate Presence

[@geraldndulue3415]

Hi Ed, great content, you always know how to make coding not feel so boring.. Lol. so i'm working on a project that requires i implement a feature Tour guide, and it's something i'm quite new to, can you please make a video on the best libraries to help implement this in a react Typescript web application?? I'd be eternally grateful 🙏

[@galaxy9689]

i think i saw something about reactour. check it out

[@BlurryBit]

First like, first comment. 🎉 Edit: What about the inView though? Do I still need to watch for scrollY/X separately or does it come packaged? I used intersection observer last time.

[@developedbyed]

they have a wee example with useInView, it's quite easy to do if you check the docs out. I deffo like the look of it

[@BlurryBit]

Gotta check it out. Exciting stuff, thanks man!!

[@mahendranath2504]

Nice thank you

[@armatheos]

so gsap or framer motion?

[@haarishkhan2158]

is framer free to use?

[@Kgtc3300K]

Amaaaaziing!

[@ahmedAltariqi]

What's your theme?

[@Gadrawingz]

Gorgeous friends on da internet

[@developedbyed]

no u!

[@hanchi8710]

why did you add that weird sound at 44 seconds

[@kirusanth]

Is it a Vape start

[@DrewLytle]

Glad I never switched from GSAP 😜

[@NSr-vw3xn]

Papa ed pls gif us framer motion series. Full pls. I gif u biscuit..

[@abdulsalamaboubakar4059]

what is the vscode theme you are using?

[@francoisrobbertze]

I'd also like to know!

[@thecoolnewsguy]

Looks like Moonlight theme

[@thecoolnewsguy]

​@@francoisrobbertze I think it's Moonlight

[@FeLiNe418]

What's wrong with keyframes?

[@producdevity]

Am I the only one who thought there was a fly in my right ear at the beginning

[@grenadier4702]

The only thing that I don't like is 32kb size

[@ness3963]

What’s you’re theme?

[@thecoolnewsguy]

Looks like Moonlight theme

[@raphauy]

Cool

[@Nikita-vf6td]

reanimated: too much code🗿

[@calvinwilliams729]

it's not complete, the video ended at stagger code

[@aljonlerios7628]

wtf is the moan broo hahahaha

[@tejaswimanivannan8897]

Hey

[@ashutosh_dev]

Idk but you just look like Dr. Strange 😂

[@shubhammhatre570]

Comment #1🎉

[@velkb228]

🤏

[@mightyjoelimited]

5th comment

[@hewr_srood]

First comment ✌

[@PilatoByte]

vaping not cool

[@dheerajsinghnagdali]

A clickbait 👿👿

[@samuelmorkbednarzkepler]

I still have no idea why anyone would use framer motion over gsap. Gsap is so much more powerful it's like watching someone compare a toy car to a fighter jet and going with the toy car because it came in a prettier wrapper.

[@chisomokereke9330]

Thank you🙇, been looking everywhere for something on usepresence and useAnimate, you just saved my mental state🫠, you're a life saver Edit: seems it's just a copy from the docs😩, wanted to know if the async is necessary, if animatePResence is necessary, could I use safetoRemove without it being in a seperate function