Chrome + Scrolltriger = jerky translate

[Hector18]

Hi there,

I’ve encountered an issue in Chrome (both on desktop and mobile) related to ScrollTrigger. When using translate-based animations, Chrome translates the content in a single step during scroll, but ScrollTrigger seems to execute the animation in "two steps." This results in a jerky and non-smooth effect.

I’ve attached a video showing the behavior on desktop and a CodePen with my code.

For pin is the same, when the element goes fixed it jumps

Thank you!

See the Pen vEYOJLj by Hector18 (@Hector18) on CodePen.

[GreenSock]

That's due to the fact that many modern browsers handle scrolling on a completely different thread than the main JS thread. Think of it like if the browser took a screenshot of the whole web page and the moment you scrolled, it immediately moved that screenshot accordingly, painted that on the screen, and then ran the JS thread which causes GSAP to update and render the animations. Frustrating, I know - it ruins scroll-driven effects like this. Try this: 

ScrollTrigger.normalizeScroll(true);

That basically makes the browser stop using its usual way of scrolling (on a different thread) and instead it uses the JavaScript thread so that it's synchronized with GSAP/ScrollTrigger effects. 

 

Again, the original issue has nothing to do with bugs in ScrollTrigger or GSAP - it's about the fundamental nature of how the browser is updating the screen. 

 

Does this help? 

[Rodrigo]

Hi,

 

This could be an alternative that achieves the same effect without any issues:

See the Pen azoGmbz by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[Hector18]

I believe the best approach is to use Lenis smooth scrolling on desktop. I’ve tested it across different browsers, and it works well. For mobile, I plan to disable smooth scrolling, deconstruct the elements, and use GSAP’s matchMedia (which is fantastic) to create an optimal user experience on mobile.

Thank you!