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

2 Ways to Make a Magnetic Buttons using React, GSAP, Framer Motion. See the difference in terms of implementation for a magnetic effect between GSAP and Framer Motion.

00:00 Intro
00:36 GSAP
3:31 Optimizing GSAP
4:25 Framer Motion
6:22 Conclusion


Thanks for watching!

#react #nextjs #awwwards #gsap #framer #motion #smooth #scroll

[AnoNymous-elmr]

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]

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.

[TexmerYT]

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

[edoardoguido]

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.

[jungsunyoo]

Your lectures make my weekend lively. Thank you.

[anthni]

This is awesome. I'm happy you did this

[friendly__drone]

This channel is underrated! So good Olivier!

[DMZT_dhruv]

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

[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

[ZiaCodes]

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.

[charlesxavier]

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.

[Korkish]

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

[blastkage]

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

[jayasaikiran]

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.

[surdmlb]

my man doing rocket science like its kindergarten math

[boboxolovotabek]

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?

[jeanmaxme]

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

[roukuo]

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.

[mambaop]

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

[prashlovessamosa]

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