Jump to content


Magnetic button in better format

Go to solution Solved by ZachSaucier,

Recommended Posts

I am asking for your help because I found this codepen on the internet.

The code works but I would like to know if there is another method using jQuery and Gsap (not TweenMax).


PS: I only want the effect on the text with the mouse


Thank you for your help.


Best regards

See the Pen bxmLYm by riogrande (@riogrande) on CodePen

Link to comment
Share on other sites

Hey ALTIMAX. It's easy to convert that demo to GSAP 3 — just follow the GSAP 3 migration guide :) No need for jQuery.

Happy tweening.

  • Like 1
Link to comment
Share on other sites

Hey Zach !

Thank you for your answer, it's ok to convert to Gsap3 but can the code be optimised with gsap only (no js math)?


Best regards Zach

Link to comment
Share on other sites

  • Solution

We don't really have the capacity to do code optimization for every person who posts in these forums.


Glancing at the code I'd try to avoid creating functions inside of a loop if possible. I bet you could avoid having to get the BoundingClientRect every mouse move event. You should also make sure to overwrite the previous animations in GSAP 3.


There's really not that many calculations going on - GSAP can't remove the need to avoid calculations in every case. 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.