Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Button animation messing up with scroll position

Go to solution Solved by akapowl,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

Welcome to the forums @ShangriLa326b


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






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



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

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

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. 🙃 

  • Like 2
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.