Button animation messing up with scroll position

[ShangriLa326b 2 Likes (Newbie)]

Hi there!

I have some issues with Greensock animations in this special case (see the attached CodePen).
First: I am no professional coder and doing this just to feed my brain. So any explanation to help me should be as easy as possible

To my case: 
On CodePen, I can't get life into the animation of the buttons like it should be and it is in the live view of my "Visual Studio Code". The buttons are triggered by the pointer position, following the movement of it a bit, getting a bit bigger and after leaving the trigger-area, the buttons are wobbling back to their original position and size.
But, unfortunately, if the site-user is scrolling a bit, the trigger-area isn't longer matching the buttons, it is slightly above or below.

Why is that? And what can I do to prevent that? 

I tried much and failed more than it is good for my ego.

Thanks a lot for help in advance, I appreciate this very much!

See the Pen JjMazJv by ShangriLa326b (@ShangriLa326b) on CodePen

[akapowl 4,621 Likes (Superhero)]

Welcome to the forums @ShangriLa326b

 

It looks to be just a matter of what values you are basing things off on mousemove.

 

https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/x

https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageX

https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX

 

Exchanging clientX/clientY in your demo with pageX/pageY appears to resolve your issue.

 

Edit:

Then again it only appears to work then when you are at the top of the page when it is being loaded - so there might be something wrong related to your logic 🤔

 

See the Pen vYpVxPX by akapowl (@akapowl) on CodePen

 

 

 

Edit 2:

Yup, you are initially basing things off of the getBoundingClientRect().top and -.left. Might want to consider changing that to the element's offsetLeft and offsetTop - and there will probably be no need to use the getBoundingClientRect() altogether - you could likely also get the width and height of the buttons via offsetHeight/offsetWidth.

 

See the Pen qBpJmZZ by akapowl (@akapowl) on CodePen

[ShangriLa326b 2 Likes (Newbie)]

Hell yeah! It works!
Thank you very much for your quick respons and solution(s). I'll take a closer look to your attached links and - as usual - it may take some time to understand what's written there 🙄
I've seen what you've done with the code. I changed it to test it online on this demo-homepage. It seems to work on first sight. 🙃