magentic and filled fields like deveb.co

[AlenN]

Hello community, I have a question: how can I get my buttons to act magnetically when hovering and move so smoothly. I would also like my field to be filled by the button when hovering. As a reference I have the buttons from the site https://deveb.co/ . Can someone please tell me how I can do this hovering with the magnetic and filling effect.

 

 

 

I've managed to do this so far, but it doesn't look anything like the page above. In addition, only the upper right field can be moved somewhat magnetically. The field below is only filled...
 

See the Pen Yzggaqp by alen95 (@alen95) on CodePen

[GreenSock]

Here are some of the problems I noticed: 

1. You were adding a new "mouseleave" event handler on EVERY "mousemove" event, so when the mouse left the button, there were probably thousands of those firing, all trying to tween the same properties of the same element. Massively wasteful.
2. You weren't applying any overwrite logic, so you were creating a bunch of overlapping tweens, all controlling the same stuff. I'd recommend using gsap.quickTo() for the best performance on things where you're constantly interrupting and trying to go to new destinations. 
3. You were using pageX/pageY instead of clientX/clientY for measurements, thus after scrolling the calculations would be incorrect. 
4. You were only applying the magnetic affect to one .btn instead of all of them. Just loop through them accordingly. 
5. You were using an onscroll listener, but you might want to consider using ScrollTrigger instead because it simplifies things. 

Maybe this will help: 

See the Pen QWooxbG?editors=0010 by GreenSock (@GreenSock) on CodePen

[AlenN]

First of all, thank you for the improvement. That solved most of my problem. However, I would like the magnetic effect to really happen like the site www.deveb.co. So very smooth. In my code, when you leave the button, the magnetic effect is now moved backwards elastically. However, on the Deveb page it is very smooth and the button returns to its original shape without any elastic effect when you exit. It also seems to me that the button moves too much to the left and right when hovering. How can I achieve this?

 

And my second question would be, how do I get the button to completely fill on hover. my second button is only half filled.

 

[GreenSock]

If you don't want it to have an elastic effect on mouseleave, just change the ease on that animation. 

 

The distance it drifts, that's logic stuff - just use a different multiplier for the distance. Currently you're using 0.4, but you can change that to 0.1 or something.

 

As for completely filling the button, that's beyond the scope of help we can provide in these free forums - we really try to keep things focused on GSAP-specific questions. Most of the things you're asking about are general logic things in the code. We do offer paid consulting services if you need that. Just reach out to us if you'd like to get details about pricing and scheduling. Or you can post in the "Jobs & Freelance" forum. 

 

Good luck!