ScrollTrigger pin issues in Firefox

[michelleenos]

I've been using ScrollTrigger for the first time and loving it! But, I've come across some issues with the plugin in Firefox specifically. I've been working on an animation with a large pinned item. Often, if you scroll too fast there's a brief moment where the pinned item will keep scrolling - before GSAP catches up and pins it in place.

 

I know this has to do with how browsers handle scroll behavior, but it seems just fine on Chrome, while Firefox is really buggy-looking if you scroll too fast. I've tried adding anticipatePin and it might help a little bit, but the problem is still there.

 

I haven't managed to get all of my content into a CodePen demo, but I'm attaching an example from the docs which displays the same problem, and a GIF screen capture. Is there anything I can do to mitigate this? 

 

See the Pen MWyaYaq?editors=1010 by crankysparrow (@crankysparrow) on CodePen.

[ZachSaucier]

Hey Michelle and welcome to the GreenSock forums! 

 

Besides trying your best to avoid pinning large elements, especially ones that require a lot of processing like really large images, I don't believe there's much that you can do besides using anticipatePin. This is because the scrolling thread is separate from the main JS thread. In other words this a browser-level issue, not something that we can fix or work around. 

[GreenSock]

And remember, you can assign a higher number to anticipatePin to control how far out it anticipates the pinning.