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. Screen Recording 2023-12-18 at 9.08.17 AM.mov

@Rodrigo thanks for the reply! I'm working on a 4k monitor and the issue does still appear using that debug URL. I am unable to reproduce on any screen that is smaller than 2000px wide. Seems to happen on both Chrome and Safari from what I can tell. Haven't tested other browsers yet.

I'm working on a site that incorporates a horizontal scroller similar to this. Only problem is that the panels begin to "jump" onto the screen when the view width is greater than 1999px. To recreate the issue, just go to the codepen link and resize the codepen viewport to be 2000px or greater. Then scroll fast back and forth. You should notice that the panels will not render until on the screen. Now resize to 1999px or less and the issue disappears. Everything looks smooth. Anyone know why/how I can fix this?