ScrollTrigger flickering when pinned

[jeppsson]

Hi!

 

We're building a site where different sections gets pinned as you scroll down. ScrollTrigger is really great for this and has saved us a lot of dev time so far.

 

We've run in to an issue where the bottom part of a section flickers when it gets pinned. I've modified an example codepen to recreate the issue, you might need to try a few times to recreate it as it's not happing every time. We get it consequently on our site with latest chrome and on iOS.

 

Here's a video of the flicker, check the bottom part at 2 secs when the red section is pinned: https://www.youtube.com/watch?v=iOQWNadW8BI

Anyone who's run in to this?

 

Thanks

 

See the Pen GRqWyyb by andreasplan8 (@andreasplan8) on CodePen

[ZachSaucier]

Hey jeppsson and welcome to the GreenSock forums.

 

This issue is caused by browser rendering errors. The scrolling thread is separate from the JS thread for performance reasons. How each browser handle the relationship between those threads varies a bit. Unfortunately there is no way to keep the threads perfectly in sync every single update. This is true regardless of which tool you use for scroll-based animations.

 

To minimize the issue you can try using ScrollTrigger's anticipatePin property. Try setting it to a value of 1 on the relevant pin ScrollTriggers or other values and see if it helps a bit. 

[jeppsson]

Hi,

 

Thanks for your swift reply!

 

Setting anticipatePin didn't help though, still have the flickering and content jumping.

[GreenSock]

2 hours ago, jeppsson said:

Setting anticipatePin didn't help though, still have the flickering and content jumping.

Are you saying that you're looking at the demo you posted above and you added anticipatePin: 1 and it made no difference at all? And did you try increasing the number and still there's no difference? Can you do a screen recording that shows the anticipatePin being set and the odd jumping behavior? You are using the latest version of ScrollTrigger too, right? 

[jeppsson]

I still have the issue on the site I'm building, so I guess it could be something else interfering with ScrollTrigger. On the demo anticipatePin seems to fix the issue.

I'll post here if I find out what's causing it on the site.

Thanks!

[akapowl]

19 hours ago, jeppsson said:

Setting anticipatePin didn't help though, still have the flickering and content jumping.

 

Reading this reminded me of a problem, I once had with a pinned horizontal 'scrolling' section, where the content also used to flicker and jump. The reason for it happening to me was this ( as explained by @GreenSock in this thread ) :

 

 

 

 

 

This is just a shot in the dark, and I am not even sure, this has anything in common with your issues, but who knows, maybe it does.

 

For me, changing the pinType ( setting pinType: "fixed" ) solved all issues back then.

 

 

 

[paullacour]

On 10/28/2020 at 1:00 PM, akapowl said:

For me, changing the pinType ( setting pinType: "fixed" ) solved all issues back then.

@akapowl  Thanks for this, it saved my day  - and my ScrollTrigger

[Craig Walker]

will-change: transform;

on the things that were jittering helped in my case.