ScrollTrigger messing with clientX/clientY and pageX/pageY

[duppz]

Hi, I'm new here and have searched a lot for a solution and found no answer.

I got this marquee type lines that change x position with ScrollTrigger, and also an effect when hovering the links with the following image, based on this solution already posted here (

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

).

The problem is that if I turn off the ScrollTrigger, everything is fine, but when I turn it on, the clientX and clientY get messy. Even if I turn off the randon x position before the trigger, the Y position still isn't correct.

I even put the quickSetter example of the blue ball with pageX and pageY and it also is not right.

The idea is that the image follows the links even if the page is scrolled, which makes the x and y positions even more random.

Your help is very appreciated. 

Thanks!

See the Pen abRpeXb by duppz (@duppz) on CodePen

[GreenSock]

That's a CSS issue - you've got a position: fixed element inside a container that has a transform applied.  Whenever you have a transform applied to an element, it creates a new stacking context, making an descendent position: fixed elements position themselves relative to that container with the transform.

 

You'll need to either change your markup so that the mouse follower elements are outside of that container or adjust your x/y to accommodate the container's position.  

[duppz]

Thank you very much for the answer. In fact it was a mistake by my part. The simple solution was to take the hover div out of the trigger div. I worked great!