React Animations just got better

Подписаться 934 тыс.

Просмотров 90 тыс.

50% 1

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

Наука

Опубликовано:

23 апр 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 93

@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 9 месяцев назад

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

@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!

@basidev Год назад

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

@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 👍

@7ala9at Год назад

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

@ilirbajrami2902 7 месяцев назад

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?

@saketchandorkar1214 Год назад

Which extension are you using to auto recommend code ?

@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 👍

@anandoganiya9070 Год назад

Please give the link for that wallpaper its so cool

@abhijeetbrahmbhatt8135 Год назад

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

@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 (:

@w1pe0ut Год назад

how did you get index variable?

@defnotathot Год назад

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

@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! ❣️

@avijitchanda7944 Год назад

Can anyone suggest in which RU-vid channel i can get advance level mongodb knowledge

@razdingz Год назад

bro what vape u using ? and juice ?

@mostafakheder7721 Год назад

I like your way of teaching ❤

@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

@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!!

@cooltv9943 Год назад

that'really amazing as always

@HarshDoes Год назад

We want Series on Framer Motion 🙌

@sjonny-depp Год назад

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

@sjonny-depp Год назад

@@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.

@deepanshusharma8321 Год назад

Your all videos are like Gems 💎💎💎💎

@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

@NSr-vw3xn Год назад

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

@yangdongjun 11 месяцев назад

great tutorials!

@rifhix7404 Год назад

Bro can you make a crush course about framer motion

@armatheos Год назад

so gsap or framer motion?

@mrprofessor2 Год назад

0:36 Nice Sound effect

@mahendranath2504 Год назад

Nice thank you

@haarishkhan2158 Год назад

is framer free to use?

@jfedererj 11 месяцев назад

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

@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

@hanchi8710 Год назад

why did you add that weird sound at 44 seconds

@ahmedAltariqi Год назад

What's your theme?

@Kgtc3300K Год назад

Amaaaaziing!

@kirusanth 7 месяцев назад

Is it a Vape start

@producdevity 9 месяцев назад

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

@Gadrawingz Год назад

Gorgeous friends on da internet

@developedbyed Год назад

no u!

@FeLiNe418 Год назад

What's wrong with keyframes?

@DrewLytle Год назад

Glad I never switched from GSAP 😜

@grenadier4702 6 месяцев назад

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

@ness3963 Год назад

What’s you’re theme?

@thecoolnewsguy Год назад

Looks like Moonlight theme

@calvinwilliams729 Год назад

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

@Nikita-vf6td Год назад

reanimated: too much code🗿

@raphauy Год назад

Cool

@tejaswimanivannan8897 Год назад

Hey

@aljonlerios7628 Год назад

wtf is the moan broo hahahaha

@ashutosh_dev Год назад

Idk but you just look like Dr. Strange 😂

@velkb228 8 месяцев назад

🤏

@shubhammhatre570 Год назад

Comment #1🎉

@hewr_srood Год назад

First comment ✌

@mightyjoelimited Год назад

5th comment

@dheerajsinghnagdali 9 месяцев назад

A clickbait 👿👿

@PilatoByte Год назад

vaping not cool

@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