Horizontal scroll pinned element has a Y-transform being applied

[josiahbrown]

I have a basic horizontal scroller as shown in the CodePen. It works as expected in the codepen.

 

For some reason, when I try to use this exact same setup in my local project, there is some strange behavior. The '.my-container' element, aka the pinned element, has a y transform being applied which is exactly equal to the 'end' pixels as soon as the animation is triggered. In other words, as soon as the animation is triggered, the pinned element is transformed 500px down the screen.

 

Has anyone seen this behavior before? I've spent about 6 hours troubleshooting and can't seem to figure this one out. Even worse is that I can't recreate the bug on codepen...

 

Here is a video of the bug on my local setup.

See the Pen QWYRmBE by josiah-brown-the-lessful (@josiah-brown-the-lessful) on CodePen

[mvaneijgen]

We are currently at GSAP version 3.12.4, so I would advies loading the latest versions. I've downloaded the pen and load the code in to Chrome and there also isn't an issue, so there is more code being loaded in your local setup. My advies disable big chunks of your code locally until the bug goes away and then in small chunks enable it again, each time check if the bug is still there, this way you can pinpoint what is causing the issue. I think you'll then be able to fix the issue your self, but if not post back here. 

 

Also remember we have minimal demos for most of the big frameworks, if you are working with any of those, see our Stackblitz starter templates. Hope it helps and happy tweening! 

[ryan_labar]

I'd also wonder if some content is being loaded (like images) after your GSAP/ScrollTrigger code, and that's causing the jump. Try running a ScrollTrigger.refresh() after all the dom element's on you page have loaded. Also, as @mvaneijgen said, it's a good idea to be on the latest version of GSAP.