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

Пікірлер: 93

  • @rohittomar4187
    @rohittomar4187 Жыл бұрын

    We want a whole series on framer motion Please 🥺🥺

  • @ObinnaAkahara

    @ObinnaAkahara

    Жыл бұрын

    Yes we do

  • @renecaceres3925

    @renecaceres3925

    Жыл бұрын

    Pls pls

  • @mrshahcloud

    @mrshahcloud

    Жыл бұрын

    Agreed!

  • @kennedyfreitas7548

    @kennedyfreitas7548

    Жыл бұрын

    yes indeed

  • @codeVictor

    @codeVictor

    Жыл бұрын

    pleassseee🥹

  • @blade2663
    @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

    @navinkumarsahu1159

    9 ай бұрын

    can you recommend me please

  • @developedbyed
    @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
    @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
    @JS_Jordan Жыл бұрын

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

  • @padione3540
    @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

    @developedbyed

    Жыл бұрын

    Sounds like a fun video! I gatcha

  • @HammadKhanYT
    @HammadKhanYT Жыл бұрын

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

  • @hamzaanis2321
    @hamzaanis2321 Жыл бұрын

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

  • @developedbyed

    @developedbyed

    Жыл бұрын

    I'm up for it!

  • @abhijeetbrahmbhatt8135
    @abhijeetbrahmbhatt8135 Жыл бұрын

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

  • @basidev
    @basidev Жыл бұрын

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

  • @LAVOTODGJORCE
    @LAVOTODGJORCE Жыл бұрын

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

  • @developedbyed

    @developedbyed

    Жыл бұрын

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

  • @ilirbajrami2902
    @ilirbajrami29027 ай бұрын

    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?

  • @Exiturn
    @Exiturn Жыл бұрын

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

  • @developedbyed

    @developedbyed

    Жыл бұрын

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

  • @saketchandorkar1214
    @saketchandorkar1214 Жыл бұрын

    Which extension are you using to auto recommend code ?

  • @anandoganiya9070
    @anandoganiya9070 Жыл бұрын

    Please give the link for that wallpaper its so cool

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

  • @7ala9at
    @7ala9at Жыл бұрын

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

  • @w1pe0ut
    @w1pe0ut Жыл бұрын

    how did you get index variable?

  • @mostafakheder7721
    @mostafakheder7721 Жыл бұрын

    I like your way of teaching ❤

  • @Jack-hk6kl
    @Jack-hk6kl Жыл бұрын

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

  • @developedbyed

    @developedbyed

    Жыл бұрын

    still need to wrap the component with an Animate Presence

  • @defnotathot
    @defnotathot Жыл бұрын

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

  • @bassilmohammad7266
    @bassilmohammad7266 Жыл бұрын

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

  • @developedbyed

    @developedbyed

    Жыл бұрын

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

  • @cooltv9943
    @cooltv9943 Жыл бұрын

    that'really amazing as always

  • @avijitchanda7944
    @avijitchanda7944 Жыл бұрын

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

  • @NSr-vw3xn
    @NSr-vw3xn Жыл бұрын

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

  • @razdingz
    @razdingz Жыл бұрын

    bro what vape u using ? and juice ?

  • @yangdongjun
    @yangdongjun11 ай бұрын

    great tutorials!

  • @armatheos
    @armatheos Жыл бұрын

    so gsap or framer motion?

  • @geraldndulue3415
    @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

    @galaxy9689

    Жыл бұрын

    i think i saw something about reactour. check it out

  • @deepanshusharma8321
    @deepanshusharma8321 Жыл бұрын

    Your all videos are like Gems 💎💎💎💎

  • @BlurryBit
    @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

    @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

    @BlurryBit

    Жыл бұрын

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

  • @haarishkhan2158
    @haarishkhan2158 Жыл бұрын

    is framer free to use?

  • @sjonny-depp
    @sjonny-depp Жыл бұрын

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

  • @developedbyed

    @developedbyed

    Жыл бұрын

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

  • @sjonny-depp

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

  • @mrprofessor2
    @mrprofessor2 Жыл бұрын

    0:36 Nice Sound effect

  • @rifhix7404
    @rifhix7404 Жыл бұрын

    Bro can you make a crush course about framer motion

  • @Gadrawingz
    @Gadrawingz Жыл бұрын

    Gorgeous friends on da internet

  • @developedbyed

    @developedbyed

    Жыл бұрын

    no u!

  • @HarshDoes
    @HarshDoes Жыл бұрын

    We want Series on Framer Motion 🙌

  • @hanchi8710
    @hanchi8710 Жыл бұрын

    why did you add that weird sound at 44 seconds

  • @mahendranath2504
    @mahendranath2504 Жыл бұрын

    Nice thank you

  • @ahmedAltariqi
    @ahmedAltariqi Жыл бұрын

    What's your theme?

  • @abdulsalamaboubakar4059
    @abdulsalamaboubakar4059 Жыл бұрын

    what is the vscode theme you are using?

  • @francoisrobbertze

    @francoisrobbertze

    Жыл бұрын

    I'd also like to know!

  • @thecoolnewsguy

    @thecoolnewsguy

    Жыл бұрын

    Looks like Moonlight theme

  • @thecoolnewsguy

    @thecoolnewsguy

    Жыл бұрын

    ​@@francoisrobbertze I think it's Moonlight

  • @jfedererj
    @jfedererj Жыл бұрын

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

  • @kirusanth
    @kirusanth7 ай бұрын

    Is it a Vape start

  • @Kgtc3300K
    @Kgtc3300K Жыл бұрын

    Amaaaaziing!

  • @FeLiNe418
    @FeLiNe418 Жыл бұрын

    What's wrong with keyframes?

  • @producdevity
    @producdevity9 ай бұрын

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

  • @ness3963
    @ness3963 Жыл бұрын

    What’s you’re theme?

  • @thecoolnewsguy

    @thecoolnewsguy

    Жыл бұрын

    Looks like Moonlight theme

  • @DrewLytle
    @DrewLytle Жыл бұрын

    Glad I never switched from GSAP 😜

  • @grenadier4702
    @grenadier47026 ай бұрын

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

  • @calvinwilliams729
    @calvinwilliams729 Жыл бұрын

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

  • @raphauy
    @raphauy Жыл бұрын

    Cool

  • @Nikita-vf6td
    @Nikita-vf6td Жыл бұрын

    reanimated: too much code🗿

  • @aljonlerios7628
    @aljonlerios7628 Жыл бұрын

    wtf is the moan broo hahahaha

  • @tejaswimanivannan8897
    @tejaswimanivannan8897 Жыл бұрын

    Hey

  • @ashutosh_dev
    @ashutosh_dev Жыл бұрын

    Idk but you just look like Dr. Strange 😂

  • @shubhammhatre570
    @shubhammhatre570 Жыл бұрын

    Comment #1🎉

  • @velkb228
    @velkb2288 ай бұрын

    🤏

  • @mightyjoelimited
    @mightyjoelimited Жыл бұрын

    5th comment

  • @hewr_srood
    @hewr_srood Жыл бұрын

    First comment ✌

  • @dheerajsinghnagdali
    @dheerajsinghnagdali9 ай бұрын

    A clickbait 👿👿

  • @PilatoByte
    @PilatoByte Жыл бұрын

    vaping not cool

  • @samuelmorkbednarzkepler
    @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
    @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

Келесі