Gsap ScrollTrigger sync

[alejandroserrat]

Hi guys,

First of all, congratulations for your work and specially for Lenis. It is awesome.

I just wanted to ask you about Lenis and the Gsap ScrollTrigger sync.

Usually I use the onUpdate method of the ScrollTrigger to make certain animations, like for example a sticky element or a horizontal scroll. I know that now with Lenis it is not necessary for certain things because I can do it with position fixed but even so, I use the onUpdate method to synchronize the scroll with certain elements such as a canvas, videos, or sequence of images

But I can’t get the self.progress of the onUpdate method to give me a value synchronized in real time with Lenis. It gives me small jumps and is a little late. You can check the issue in this codepens:

• codepen onUpdate
• codepen timeline

I try a lot of things to fix it and ScrollTrigger.update() dont fix the problem. Talking with @clementroche we discovered that the only way to fix this unsync is using ScrollTrigger.update() + ScrollTrigger.scrollerProxy() but that it is not the best way to do it. If you dont use Lenis, the fake sticky animation works perfect but when activate it the problem appear again. Since Lenis affects the native scroll, it should work without a proxy, right?

I always use a onUpdate method, or gsap.to or timelines instead of using the ScrollTrigger pin because it’s clean and gives me more freedom doing the layout.

I open the issue at Clement's request for your control and review.

If you find a correct solution let me know to fix it. I searched for information and found nothing. Has anyone reported this error before? I think it is quite a common thing to do with Gsap + ScrollTrigger.

Thank you very much,