React Animations just got better

Поделиться
HTML-код
  • Опубликовано: 23 апр 2023
  • 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 Год назад +174

    We want a whole series on framer motion Please 🥺🥺

  • @blade2663
    @blade2663 Год назад +33

    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!

  • @developedbyed
    @developedbyed  Год назад +21

    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 Год назад +1

    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 Год назад +1

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

  • @HammadKhanYT
    @HammadKhanYT Год назад

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

  • @padione3540
    @padione3540 Год назад +2

    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.

  • @ayoubbsd2747
    @ayoubbsd2747 Год назад +1

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

  • @abhijeetbrahmbhatt8135
    @abhijeetbrahmbhatt8135 Год назад +4

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

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

    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?

  • @defnotathot
    @defnotathot Год назад

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

  • @hamzaanis2321
    @hamzaanis2321 Год назад +5

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

  • @mostafakheder7721
    @mostafakheder7721 Год назад

    I like your way of teaching ❤

  • @LAVOTODGJORCE
    @LAVOTODGJORCE Год назад +2

    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 👍

  • @cooltv9943
    @cooltv9943 Год назад

    that'really amazing as always

  • @deepanshusharma8321
    @deepanshusharma8321 Год назад

    Your all videos are like Gems 💎💎💎💎

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

  • @anandoganiya9070
    @anandoganiya9070 Год назад

    Please give the link for that wallpaper its so cool

  • @saketchandorkar1214
    @saketchandorkar1214 Год назад

    Which extension are you using to auto recommend code ?

  • @7ala9at
    @7ala9at Год назад

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

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

    great tutorials!

  • @Exiturn
    @Exiturn Год назад +1

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

    • @developedbyed
      @developedbyed  Год назад +2

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

  • @HarshDoes
    @HarshDoes Год назад

    We want Series on Framer Motion 🙌

  • @mrprofessor2
    @mrprofessor2 Год назад +1

    0:36 Nice Sound effect

  • @bassilmohammad7266
    @bassilmohammad7266 Год назад

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

    • @developedbyed
      @developedbyed  Год назад +2

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

  • @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  Год назад +1

      still need to wrap the component with an Animate Presence

  • @w1pe0ut
    @w1pe0ut Год назад

    how did you get index variable?

  • @razdingz
    @razdingz Год назад

    bro what vape u using ? and juice ?

  • @BlurryBit
    @BlurryBit Год назад +1

    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  Год назад +2

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

  • @avijitchanda7944
    @avijitchanda7944 Год назад

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

  • @mahendranath2504
    @mahendranath2504 Год назад

    Nice thank you

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

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

  • @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  Год назад +1

      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.

  • @rifhix7404
    @rifhix7404 Год назад

    Bro can you make a crush course about framer motion

  • @NSr-vw3xn
    @NSr-vw3xn Год назад +1

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

  • @armatheos
    @armatheos Год назад

    so gsap or framer motion?

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

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

  • @haarishkhan2158
    @haarishkhan2158 Год назад

    is framer free to use?

  • @Kgtc3300K
    @Kgtc3300K Год назад

    Amaaaaziing!

  • @geraldndulue3415
    @geraldndulue3415 Год назад +1

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

      i think i saw something about reactour. check it out

  • @DrewLytle
    @DrewLytle Год назад

    Glad I never switched from GSAP 😜

  • @ahmedAltariqi
    @ahmedAltariqi Год назад

    What's your theme?

  • @abdulsalamaboubakar4059
    @abdulsalamaboubakar4059 Год назад +1

    what is the vscode theme you are using?

  • @hanchi8710
    @hanchi8710 Год назад

    why did you add that weird sound at 44 seconds

  • @Gadrawingz
    @Gadrawingz Год назад +3

    Gorgeous friends on da internet

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

    Is it a Vape start

  • @grenadier4702
    @grenadier4702 4 месяца назад

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

  • @FeLiNe418
    @FeLiNe418 Год назад

    What's wrong with keyframes?

  • @ness3963
    @ness3963 Год назад

    What’s you’re theme?

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

    reanimated: too much code🗿

  • @raphauy
    @raphauy Год назад

    Cool

  • @calvinwilliams729
    @calvinwilliams729 Год назад

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

  • @tejaswimanivannan8897
    @tejaswimanivannan8897 Год назад

    Hey

  • @ashutosh_dev
    @ashutosh_dev Год назад

    Idk but you just look like Dr. Strange 😂

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

    wtf is the moan broo hahahaha

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

    🤏

  • @shubhammhatre570
    @shubhammhatre570 Год назад

    Comment #1🎉

  • @mightyjoelimited
    @mightyjoelimited Год назад

    5th comment

  • @hewr_srood
    @hewr_srood Год назад

    First comment ✌

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

    A clickbait 👿👿

  • @PilatoByte
    @PilatoByte Год назад

    vaping not cool

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

    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