GSAP vs Framer Motion for React

แชร์
ฝัง
  • เผยแพร่เมื่อ 24 ธ.ค. 2024

ความคิดเห็น • 90

  • @LePhenixGD
    @LePhenixGD 5 หลายเดือนก่อน +29

    Man GSAP is a life saver for sequential animations, I don't think there's any other tool that made it easier to create them

    • @AnujDasADx
      @AnujDasADx 3 หลายเดือนก่อน

      true I do agree on that.

  • @A_M_R_2004
    @A_M_R_2004 5 หลายเดือนก่อน +9

    Love what you do bro, keep focusing on awwwards content❤️

  • @fathinfadhil
    @fathinfadhil 5 หลายเดือนก่อน +9

    i never used gsap but by what you're describing with gsap timeline i think you could do animation sequencing with the useAnimate() hook in framer motion. you'll be able to use the javascript 'await' keyword with it to wait for the animation to finish before continuing to the next animation which i think makes the code easier to read

    • @SAIEN333
      @SAIEN333 3 หลายเดือนก่อน

      What if i want the 2nd animation to play while 1st is already playing, like #% complete and trigger next animation

    • @nonstopper
      @nonstopper 2 หลายเดือนก่อน +1

      @@SAIEN333 You can do that still. it runs the exact same synchronicity as the javascript youre declaring it with. So you can write awaits, pair things together, promises, etc. And all pf it just works.

    • @GibsonMurray-v4h
      @GibsonMurray-v4h หลายเดือนก่อน +1

      @@SAIEN333 GSAP definitely makes this easier but you can do `await Promise.all([...])` and add delays depending on when you want them to run relative to each other.

  • @alaabourega2331
    @alaabourega2331 4 หลายเดือนก่อน

    First time finding your channel and dude it's already standing out , thank you sm for your efforts

  • @Alex.Shalda
    @Alex.Shalda 5 หลายเดือนก่อน +2

    What a thorough explanation, thank you 🎉

  • @hudsonvini7345
    @hudsonvini7345 5 หลายเดือนก่อน +10

    This dude is, THE DUDE! I learn so much with you, thank you so much, i really appreciate your work bro

  • @ParwinderSingh-te7lb
    @ParwinderSingh-te7lb 5 หลายเดือนก่อน +1

    Man so much great content I subscribed. And I know ur going to make big on TH-cam and life❤

  • @bingers_tv
    @bingers_tv 5 หลายเดือนก่อน +15

    Framer Motion has the useAnimate hook for creating timeline animations - is that comparable?

  • @Astrelune
    @Astrelune 5 หลายเดือนก่อน

    man blessed that i found this channel

  • @dhruvkaushik2122
    @dhruvkaushik2122 5 หลายเดือนก่อน

    I have learned a lot from you thank you for such wonderful content

  • @vemuyaswanth803
    @vemuyaswanth803 5 หลายเดือนก่อน +1

    Exactly what I needed 🔥

  • @buildervision7082
    @buildervision7082 4 หลายเดือนก่อน

    Very informative video. Thank you

  • @abujessica
    @abujessica 5 หลายเดือนก่อน +1

    Excellent videos, I love advice that end with "do both" because why NOT
    some feel like learning both is a sin
    y'all fellas got time to compete with elon musk yet waste it on brittle matters and disregard all the achievements you could've had in your spare time
    spare time is truly a bless, not everybody gets to spend it well thou

  • @trebturner
    @trebturner 5 หลายเดือนก่อน +1

    When is your course coming out? Very excited for it

  • @Nicolas-vj5zc
    @Nicolas-vj5zc 5 หลายเดือนก่อน

    thank you so much! love the video

  • @mhdfirassbarakat6587
    @mhdfirassbarakat6587 5 หลายเดือนก่อน +1

    would you please make a crash course video for react framer motion ?

  • @aayushgupta7839
    @aayushgupta7839 5 หลายเดือนก่อน +11

    Can you create a complete guide/tutorial for gsap with react ?

    • @RB_MAFIA
      @RB_MAFIA 5 หลายเดือนก่อน +5

      yeah i need that too

    • @AdolfRizzler41
      @AdolfRizzler41 5 หลายเดือนก่อน +1

      ​@@RB_MAFIAyes shit thank you so much thank you this is just what I need

  • @emirsezer10
    @emirsezer10 5 หลายเดือนก่อน +3

    Nice video, thank you, I have a question, please answer me. It is impossible to make a page transition with the Next.js app router. Therefore, is choosing to use the page router the right approach or should transitions be abandoned? What do you think?

    • @paakofibamfoquaicoe4193
      @paakofibamfoquaicoe4193 5 หลายเดือนก่อน +1

      Page transitions can be done in the template file. Not sure though, he has a video on it.

    • @emirsezer10
      @emirsezer10 5 หลายเดือนก่อน

      @@paakofibamfoquaicoe4193 Yes, correct entries are made, but exit animations are not made.

    • @emirsezer10
      @emirsezer10 5 หลายเดือนก่อน

      @@paakofibamfoquaicoe4193 Yes, correct entries are made, but exit animations are not made.

  • @mohammadkhakhsoor2068
    @mohammadkhakhsoor2068 5 หลายเดือนก่อน +1

    Can you please create a whole Playlist for framer motion ? Step by step tutorial comprehensively

  • @michaelsousajr
    @michaelsousajr 5 หลายเดือนก่อน +1

    feel like the learning curve for gsap is a little bit steeper but much more worth it, framer gives me trouble half the time.

    • @hijk-l7c
      @hijk-l7c 5 หลายเดือนก่อน

      how and where to learn GSAP?

  • @gabrielm4979
    @gabrielm4979 5 หลายเดือนก่อน +2

    Nice video. Are you planning to create a gsap course from scratch? That would be awesome

  • @fokspoks
    @fokspoks 5 หลายเดือนก่อน +5

    If say this short: GSAP is a father, while Framer Motion is a newborn child

    • @mauvang1594
      @mauvang1594 12 วันที่ผ่านมา

      who is the mother ?

  • @icefield
    @icefield 5 หลายเดือนก่อน +2

    isn't the useAnimate hook from framer motion similar to gsap's timeline? What's timeline from gsap better at?

  • @rahulk138
    @rahulk138 5 หลายเดือนก่อน

    He's back!

  • @giggitygigs
    @giggitygigs 5 หลายเดือนก่อน

    Thank you for this

  • @FreakyYas
    @FreakyYas 5 หลายเดือนก่อน +2

    Please put a detailed video on locomotive smooth scroll or parallax animate I'm struggling or

  • @nellymotion
    @nellymotion 5 หลายเดือนก่อน

    Thank you !

  • @aymenbachiri-yh2hd
    @aymenbachiri-yh2hd 5 หลายเดือนก่อน

    Thank you so much

  • @HenryBabbage
    @HenryBabbage 4 หลายเดือนก่อน

    Really nice. How can we make this work with the browser back and forwards buttons?

  • @dvkerns
    @dvkerns 5 หลายเดือนก่อน

    Any good arguments for or situations in which you ended up using both?

  • @nothing-tj9eh
    @nothing-tj9eh 5 หลายเดือนก่อน +1

    hi can you do a tutorial on page transition using framer motion and app router in nextjs

    • @adithnarein8420
      @adithnarein8420 5 หลายเดือนก่อน

      I don't think its possible in app router, I searched a lot for it aswell!

  • @Tszyu01
    @Tszyu01 5 หลายเดือนก่อน

    What does the license look like for GSAP if you’re at a company/business? How does that compare to framer?

  • @jiayizhan967
    @jiayizhan967 5 หลายเดือนก่อน

    Can you create a framer motion course?

  • @realdaly
    @realdaly 5 หลายเดือนก่อน

    for simple animations from a personal experience I really don't recommend both,
    again if your animations were not complicated just code them by yourself or go with a lightweight one like aos (animate on scroll)

  • @luckyalade4171
    @luckyalade4171 24 วันที่ผ่านมา

    I have used both but I will go for gsap all day

  • @samnmeje3486
    @samnmeje3486 5 หลายเดือนก่อน

    really informational video, please what is the equivalent of framer for vue js

  • @MihirAmanRaj
    @MihirAmanRaj 5 หลายเดือนก่อน

    Hi bro,
    so i have got a task to make a animation
    where the page starts with a video and as we scroll down a mask should appear which is zoomed out as we scroll and video is still being played and can be seen through that mask, and when we continue scrolling it the mask goes to a place and is replaced by the logo eventually, any idea on how do it,
    i can dm u on discord if u dont get it.

  • @samiullahsheikh5015
    @samiullahsheikh5015 5 หลายเดือนก่อน

    What about react-spring? What's you thought on it?

  • @iamahtic
    @iamahtic 5 หลายเดือนก่อน

    Goated

  • @yashsagar734
    @yashsagar734 4 หลายเดือนก่อน

    thanks

  • @immipixediter210
    @immipixediter210 5 หลายเดือนก่อน +1

    3:09 framer-motion
    animate()

  • @hijk-l7c
    @hijk-l7c 5 หลายเดือนก่อน

    how and where to learn GSAP?

  • @DMZT_dhruv
    @DMZT_dhruv 5 หลายเดือนก่อน

    Missed ya bro, hope you are doing fine 🫂

  • @bensal9948
    @bensal9948 5 หลายเดือนก่อน +1

    Brother I love you mr content and its super amazing. I learned a lot from you as I am also just want to become like you. I just want to start my creative developer career please make a video on what only languages I have to study to create awwwards winning websites like you and what languages you have studied and worth for making animation only
    .... Please read it out ❤❤

    • @ramonbnjmn
      @ramonbnjmn 5 หลายเดือนก่อน

      We are waiting for his course

  • @taszidizaz4079
    @taszidizaz4079 5 หลายเดือนก่อน

    🔥🔥🔥

  • @okkashaally2115
    @okkashaally2115 5 หลายเดือนก่อน

    There's "motion one" an alternative to gsap by the "framer motion" team

  • @mirjalol_nightmares
    @mirjalol_nightmares 5 หลายเดือนก่อน

    bro, are your projects are responsive? cos last time i used your projects but not responsive

  • @devwithzain
    @devwithzain 5 หลายเดือนก่อน

    ❤❤❤

  • @aberbaCodes
    @aberbaCodes 5 หลายเดือนก่อน

    I guess I'm learning gsap then 😅

  • @kakaponick
    @kakaponick 5 หลายเดือนก่อน

    react-spring?

  • @victormustin2547
    @victormustin2547 5 หลายเดือนก่อน

    Team Framer!

  • @tejasgk369
    @tejasgk369 5 หลายเดือนก่อน

    I just use both in a single proj 😅

  • @dung_gl
    @dung_gl 5 หลายเดือนก่อน

    Can anyone suggest me some channels that cover awesome content like this one? Thanks

  • @sahilverma_dev
    @sahilverma_dev 5 หลายเดือนก่อน

    You're GOD 🔥🔥🔥🔥

    • @nishadsvanced7708
      @nishadsvanced7708 5 หลายเดือนก่อน

      Then what about who created Gsap nad FM ?
      AND what about who JS?
      ND assembly?

  • @RKD_24
    @RKD_24 10 วันที่ผ่านมา

    Now framer motion becomes motion and you can use it with html

  • @picklenickil
    @picklenickil 5 หลายเดือนก่อน

    Vanilla js css is best

  • @yanngatignol9126
    @yanngatignol9126 5 หลายเดือนก่อน +8

    Framer motion give laggy result sometimes on prod env 👎

    • @cjstronger
      @cjstronger 5 หลายเดือนก่อน

      I’ve noticed the same thing, even simple things like translateX animations are laggy.

    • @realdaly
      @realdaly 5 หลายเดือนก่อน

      agree 100%

  • @megamind452
    @megamind452 5 หลายเดือนก่อน

    Why not use both ? I know it will contradict in the codebase and people will say it is not best practice. But if you know what you are doing, then it can work flawlessly in combination . Let me know if I am missing something and I am happy to learn. Thanks

    • @shahrozahmed9746
      @shahrozahmed9746 5 หลายเดือนก่อน +3

      bundle size of your app will increase

    • @megamind452
      @megamind452 5 หลายเดือนก่อน

      @@shahrozahmed9746 by how much?

    • @megamind452
      @megamind452 5 หลายเดือนก่อน

      @@shahrozahmed9746 by how much?

    • @megamind452
      @megamind452 5 หลายเดือนก่อน

      @@shahrozahmed9746 by how much?

    • @megamind452
      @megamind452 5 หลายเดือนก่อน

      By how much?

  • @itsjmendez
    @itsjmendez 5 หลายเดือนก่อน +21

    GSAP lacks tutorials, making the developer experience not the best.

    • @itsjmendez
      @itsjmendez 5 หลายเดือนก่อน +9

      Specially with React & Next.Js

    • @kamichikora6035
      @kamichikora6035 4 หลายเดือนก่อน

      ​@@itsjmendezyep

    • @SAIEN333
      @SAIEN333 3 หลายเดือนก่อน

      Same with vue. I had 2 projects with vue and nuxt. Everything was working well until i did the SSG in nuxt. And animation stopped working on random elements.
      And i couldn't find any help

  • @WaldoTheWombat
    @WaldoTheWombat 5 หลายเดือนก่อน

    Hi! Are you half Asian? 😃

  • @divyv20
    @divyv20 5 หลายเดือนก่อน

    Hey Olivier ! I loved this video . I work with entrepreneurs like you who have under 25k subscribers to help them to grow to 100k subscribers in under 12 months with proper systems . I actually helped Chirag to achieve 92k subscribers in under 11 months . Could I do a free audit to see if I can help you do the same ? I just think it's really important that more people see your content and want to help you on that mission .

  • @Tracer73866
    @Tracer73866 5 หลายเดือนก่อน

    gsap is not completely free

  • @nested9301
    @nested9301 3 หลายเดือนก่อน

    gsap is not open source lol