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

my man just cleared age old debate

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.

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.

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

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.

Your lectures make my weekend lively. Thank you.

This is awesome. I'm happy you did this

This channel is underrated! So good Olivier!

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

This is Goldmine, Thanks for sharing

Thanks man love your content ❤

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

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.

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.

you are a genius!

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

Well done, Framer Motion FTW!

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.

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

Letssss goooowwwww🎉🎉🎉🎉

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 :)

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.

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?

Thanks for this video

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

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

More like this 👀👀

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

GSAP for life

my man doing rocket science like its kindergarten math

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)

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

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

👌🤔

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

Great video brother :)

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

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

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

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 )

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

Hey yo.

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 :)

i will go with framer personally

i will prefer framer motion tho

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

Gsap 😢

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?

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

why use one when you can do two🤌