Snapping Cursor to Button Size

[maoux]

I'd like the cursor to snap to the size of the button when I hover over it, and then return to its original size when I move away from it.

See the Pen LYvoPLV by Mau-Dumapias (@Mau-Dumapias) on CodePen

[mvaneijgen]

What have you tried already? We love to see what you can come up with, that way we can see your thought process and thus better help you understand the tools!

 

I would add another addEventListener to use button to check if the mouse is entering or leaving and then you could use something like https://gsap.com/docs/v3/Plugins/MotionPathPlugin/static.getRelativePosition()/ to move the element from it current position to the center one. 

 

Also check out the quickSetter() in GSAP, a much more performant  way of having things animate on mouse move. https://gsap.com/docs/v3/GSAP/gsap.quickSetter()/

 

Hope it helps and happy tweening! 

[Rodrigo]

This demo by @GreenSock should help:

See the Pen eYjNGrz by GreenSock (@GreenSock) on CodePen

 

Happy Tweening!