Follow mouse movement within element bounds attempt

[eDesign Interactive]

Hello everyone :).
I've got a difficult task on my hands ( for me at least ) - I'm trying to achieve the following functionality using gsap tools:
- Have 2 circles - big/small

- Have the 2 circles follow mouse movement in whole section with restrictions to the movement to within the element they are found in (or their centers cant leave the parent element )
What I have going on in the demo seems to work, but I'm aware the code isn't very efficient, also doesn't properly calculate coordinates while having inspector open and lagging terribly.
Any ideas or leads of what can be done here to optimize this or go about solving this problem in a more efficient way ? Any types of advice would be awesome

See the Pen KKMxdNo by georgi-draganow (@georgi-draganow) on CodePen

[ZachSaucier]

Hey eDesign Interactive and welcome to the GreenSock forums. Thanks for supporting GreenSock with a Business Green membership! We couldn't do what we do without people like you.

 

You're using a lot of MotionPathPlugin's helper functions every single time that the mousemove function fires (which is a lot). That's a big performance hit because it has to measure where things are each time. In general when improving performance you want to minimize the number of things that need to be calculated, especially calculations that are relative to other things.

 

You can make a mouse following effect much more simply as we show in the .quickSetter() docs. If I were you I would try using the same method but applying it to your two circles and restricting the x and y movement to the bounds that you have.