2 Ways to Make a Magnetic Effect using Framer Motion, GSAP and Nextjs

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

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

  • @aritrasarkar9374
    @aritrasarkar9374 ปีที่แล้ว +23

    my man just cleared age old debate

    • @olivierlarose1
      @olivierlarose1  ปีที่แล้ว +2

      😂

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

      There's no debate ,Framer motion is a clear winner over GSAP by a long margin.

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

    Ayooo, the way he explains ??? The way he waits for the problem to pop up, and then explain why that is, before fixing it ? That is just GOLD.
    Great great tutorial.

  • @monyetbesar
    @monyetbesar ปีที่แล้ว +9

    I was waiting for someone to release tutorials like this with the tech stack you use, thanks for the effort!! This has been really helpful.

  • @edoardoguido1688
    @edoardoguido1688 ปีที่แล้ว +16

    Actually, with Framer Motion you can avoid extra renders by not using state to update the position, and using the useAnimate hook. By attaching it to a ref, you can continuously update the element’s position in a useEffect hook similar to how you’re doing with GSAP. The good thing is that state won’t be even needed, thus increasing performance.

    • @olivierlarose1
      @olivierlarose1  ปีที่แล้ว +4

      For sure! Ultimately it depends on the use case. I believe for a small animation like this one, updating state is fine and it makes it easier to maintain and write. But for a performance intensive use case, you're right the useAnimate() hook would definitely be better. Thanks for your input!

    • @ssan4777
      @ssan4777 ปีที่แล้ว

      have you implemented this with useAnimate? i tried using useAnimate, and its rather laggy and slow 🥲

    • @olivierlarose1
      @olivierlarose1  ปีที่แล้ว +2

      Just made a video on the subject: th-cam.com/video/5YB1roFD7Cc/w-d-xo.html

    • @zenova9926
      @zenova9926 ปีที่แล้ว +1

      gsap is way more performant if you use imperative method, framer motion will hit its limit sooner than you would expect

  • @blastkage7190
    @blastkage7190 6 หลายเดือนก่อน +2

    if your framer motion magnetic button is bugging its because of the latest versions are making it bug i used ^10.15.1 version and it worked perfectly

    • @siddhukolipaka6783
      @siddhukolipaka6783 6 หลายเดือนก่อน

      Thanks a lot dude
      you've saved me
      I've also felt the animation lagging and thought it was because of the continuous recalculations but your solution fixed it

  • @TexmerYT
    @TexmerYT ปีที่แล้ว +1

    OMG THIS CHANNEL IS PURE GOLD; all the questions I have about all the amazing sites I love are solved here, thank you Oliver for your wonderful work. 🤩

  • @friendly__drone9352
    @friendly__drone9352 ปีที่แล้ว

    This channel is underrated! So good Olivier!

  • @jungsunyoo7852
    @jungsunyoo7852 ปีที่แล้ว

    Your lectures make my weekend lively. Thank you.

  • @Pablo_JRE
    @Pablo_JRE ปีที่แล้ว

    you are the man! I am a starting frontend developer, who is looking for his first job! love the video's and you are a great inspiration

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

    I just wanna say thanks and I love you for creating such a simple explanation tutorial you gained a sub!!, and the way you use react is so good!, I'm improving my react code aswell because of you

  • @anth0ni33
    @anth0ni33 ปีที่แล้ว

    This is awesome. I'm happy you did this

  • @ziacodes
    @ziacodes ปีที่แล้ว +2

    Could you make next tutorials on framer motion? I like that cause of simplified code and real life variables like mass, damping, stiffness. It would also help in my portfolio redesign.
    All The Best, Olivier.

  • @punitgupta8986
    @punitgupta8986 ปีที่แล้ว

    This is Goldmine, Thanks for sharing

  • @soyelchicodelanus8471
    @soyelchicodelanus8471 ปีที่แล้ว +1

    you are a genius!

  • @filippapiernik9737
    @filippapiernik9737 ปีที่แล้ว

    Well done, Framer Motion FTW!

    • @olivierlarose1
      @olivierlarose1  ปีที่แล้ว +1

      Yes sir💯

    • @filippapiernik9737
      @filippapiernik9737 ปีที่แล้ว

      ​@@olivierlarose1 Looking forward for video showcasing the cool new "useAnimate" hook, which lets you create awesome animation sequences

  • @Vagabondi404
    @Vagabondi404 ปีที่แล้ว +1

    had already toyed a bit with the github repo few days ago, you seem to very oriented into animations and awwwards type of programming, would be nice to see you code a full project of a few hours trying to implement original designs, like trying to win site of the day or something. maybe you don't have time for it, just sending the message out there :)

    • @olivierlarose1
      @olivierlarose1  ปีที่แล้ว +1

      It’s definitely in my plans! Right now I’m focused on the technical side of making animations but I’m planning on slowly transitioning into showing more of the creative side, showing the whole process that comes with it and going for those awards!

  • @Korkish
    @Korkish 7 หลายเดือนก่อน +1

    i seems broken to me, the animation loses velocity everything state updates, how do i fix that? :(

  • @jayasaikiran1761
    @jayasaikiran1761 ปีที่แล้ว

    Thank you bro I have learned new concept in framer motion.I am waiting to see a tutorial on page transition in next js 13 only in app directory with framer motion.

    • @olivierlarose1
      @olivierlarose1  ปีที่แล้ว

      Yes waiting for an official way of doing this with framer motion and I’ll make a video for sure!

  • @achrafsabbar2028
    @achrafsabbar2028 ปีที่แล้ว

    Thanks for this video

  • @jsantos1220
    @jsantos1220 6 หลายเดือนก่อน

    GSAP for life

  • @Darthspudjohal
    @Darthspudjohal ปีที่แล้ว

    is there a performance hit on the framer example for the constant state updates?

    • @olivierlarose1
      @olivierlarose1  ปีที่แล้ว

      As long as you’re not stacking multiple state update it should be fine. Also since it’s on the object itself and not on the window, it reduces the risk of stacking multiple events that trigger multiple state update. But you definitely have to be careful when setting the state continuously like that.

  • @boboxolovotabek169
    @boboxolovotabek169 ปีที่แล้ว

    hey man, i love the sound quality in your videos. As someone who is looking for a good microphone, could you let me know the one u use please?

  • @roukuo
    @roukuo 9 หลายเดือนก่อน

    is there a way to build a homepage with framer and then implement this somehow? Im not that good with code so i could not write a whole homepage with code but if there is a way to implement this or other effects like the revealing circle mask you made a tutorial about into a frame website this would be really cool.

  • @prashlovessamosa
    @prashlovessamosa ปีที่แล้ว +2

    Can you please make longer videos making some complex stuff.
    Thing you teach is addictive

    • @olivierlarose1
      @olivierlarose1  ปีที่แล้ว +1

      Yes for sure! Thanks for the feedback🤝

  • @joyahmed963
    @joyahmed963 ปีที่แล้ว

    More like this 👀👀

  • @taszidizaz4079
    @taszidizaz4079 ปีที่แล้ว

    Thanks man love your content ❤

  • @charlesxavier77
    @charlesxavier77 ปีที่แล้ว

    Awesome video! Thank you for explanation. I used gsap quite a bit with react. It was my first choice for me as understand it pretty well. Altough the more I use it with react the more I see lots and lots of problems mainly around the life cicle of the react. Lately I've been trying to learn framer motion but for some reason it's hard for me to do xd. I wanted to try it because it build specifically for react, unlike gsap.
    For example one issue I've encountered using gsap was when I changed the size of a component above my animation, the starting point of the animation stayed the same. For example, I had tabs and a horizontal scroll. If I switched to a tab with more stuff, the gsap animation would start from the wrong place. I fixed it by using a scroll refresh, but the tricky part was that I couldn't refresh just the scroll trigger for the horizontal scroll when I changed tabs. I had to refresh them all, which meant adjusting the timing and delays of the animations to avoid flickering.

    • @olivierlarose1
      @olivierlarose1  ปีที่แล้ว

      I also learned Gsap before Framer Motion so there was definitely a learning curve for me as well.
      Yep I’ve had similar issues as well with Gsap. I have way less inconsistent behaviour with Framer and there’s no refreshing or anything like that since it’s declarative so that’s great.
      Cheers!

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

    Awesome

  • @user-su4rd3ml8b
    @user-su4rd3ml8b 9 หลายเดือนก่อน

    my man doing rocket science like its kindergarten math

  • @mambaop8296
    @mambaop8296 ปีที่แล้ว

    sorry for adding links, love your videos 🔥🔥🔥🔥🔥🔥🔥

  • @kobibr9362
    @kobibr9362 ปีที่แล้ว

    I use both in the same project. I like framer way of writing code but framer is slow for some things(basically animating anything that require low latency with a lot of instances). For example: changing an svg transparency overtime. For some reason framer introduce some fringing effect(it look that the event listener is missing some events with framer while that does not happen with gsap).

    • @olivierlarose1
      @olivierlarose1  ปีที่แล้ว

      Interesting! I never tried to change the transparency of an SVG, but I know the event listener can sometimes skip frames when moving fast. In all cases, thanks for your input!

  • @amined801
    @amined801 ปีที่แล้ว

    nice tutorial, i wonder is there a way to override ease on mouse leave, for example the default will be elastic.out(1, 0.8) and on mouse leave i want it to be elastic.out(1, 0.3)

    • @olivierlarose1
      @olivierlarose1  ปีที่แล้ว

      Yes you can create a xEnter(), yEnter() and xLeave(), yLeave() instead of xTo and yTo

    • @amined801
      @amined801 ปีที่แล้ว

      @@olivierlarose1 oh as a function interesting 🤔

  • @khaledx30ify
    @khaledx30ify ปีที่แล้ว

    great work olivier i prefer framer motion. declarative programing the code feel more cleaner and is less work i knew not by much but the effort to tell it to do every thing spicficly is a bit annoying in some cases

  • @ilmanmanarulqori5632
    @ilmanmanarulqori5632 ปีที่แล้ว

    Letssss goooowwwww🎉🎉🎉🎉

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

    So GSAP has competition finally...

  • @rashidshahriar7913
    @rashidshahriar7913 ปีที่แล้ว

    We are waiting for serise, learning animation from top to bottom

  • @faisalabdulkadir9439
    @faisalabdulkadir9439 ปีที่แล้ว

    Bro please how did u get so good at framer motions?? i want to get good but the docs are so trash

    • @olivierlarose1
      @olivierlarose1  ปีที่แล้ว

      Blood sweat and tears💯but honestly it’s just a lot of practice and playing around with things

    • @faisalabdulkadir9439
      @faisalabdulkadir9439 ปีที่แล้ว

      @@olivierlarose1 thanks for the reply bro, the framer motions are still bad tho lol

    • @olivierlarose1
      @olivierlarose1  ปีที่แล้ว

      Keep working at it💯

  • @ashuu9257
    @ashuu9257 ปีที่แล้ว

    dudeeeeeeee , one suggestion please - can i start off with learning react js , tailwindcss & nextjs ts without making projects in html css js , coz I already made some projects using react & it was completely fine (worried about what if people ask for html css js )

    • @olivierlarose1
      @olivierlarose1  ปีที่แล้ว +1

      It’s all good, you should learn css tho it’s a good skill to have and you can’t expect all projects to be using tailwind

    • @ashuu9257
      @ashuu9257 ปีที่แล้ว

      @@olivierlarose1 🥺 thankss a ton , you're great

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

    Framer motion one doesn't work as of now. It's super buggy and not smooth

  • @pietro5856
    @pietro5856 11 หลายเดือนก่อน

    For me both are complicate to learn , I do all my animation by scratch only with Js and CSS , I find it very easy

  • @snatvb
    @snatvb 10 หลายเดือนก่อน

    gsap: you got memory leak because you forgot clear animations
    framer: you use state that updates every inout tick that's very expensive, your gc will scream :)

  • @alizaib.1
    @alizaib.1 ปีที่แล้ว

    Thanks for this video I'm just searching about this ❤❤
    let me when you are going to upload the video that I have asked you please send as soon as possible I am waiting ❤❤

  • @rayhankessal6976
    @rayhankessal6976 ปีที่แล้ว

    👌🤔

  • @effekt.design
    @effekt.design ปีที่แล้ว

    Great video brother :)

  • @prashlovessamosa
    @prashlovessamosa ปีที่แล้ว

    Hey yo.

  • @TenzDelek
    @TenzDelek ปีที่แล้ว

    i will go with framer personally

  • @ruizxzx
    @ruizxzx ปีที่แล้ว

    i will prefer framer motion tho

  • @teksdesign
    @teksdesign ปีที่แล้ว

    Gsap 😢

  • @FULTONOFFICIALKFV
    @FULTONOFFICIALKFV ปีที่แล้ว

    Bro please the next time, make your videos a bit slower, everything is fast and difficult to follow some steps, thank you 🙏

  • @codewithkareem
    @codewithkareem ปีที่แล้ว

    Another amazing content from the best animation tutorial channel, you’re the best man🔥❤️.
    I need your help, been working on this project and I wanted to try one of your animation videos and I used it, I’m having some errors, idk if you can help or where I can contact you?

  • @hassaantahir3861
    @hassaantahir3861 ปีที่แล้ว

    Great video .. as always. 🔥
    Love. To se you making clone of this portfolio (regisgrumberg).
    Thanks.. 🎉

  • @devyb-cc
    @devyb-cc ปีที่แล้ว

    why use one when you can do two🤌

    • @olivierlarose1
      @olivierlarose1  ปีที่แล้ว +1

      Haha why not both🤷‍♀️

    • @devyb-cc
      @devyb-cc ปีที่แล้ว

      @@olivierlarose1 exactly, it has pros and cons after all. feel free to chose the suitable one.

    • @olivierlarose1
      @olivierlarose1  ปีที่แล้ว +1

      Thats it 💯