Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jeppsson

ScrollTrigger flickering when pinned

Go to solution Solved by ZachSaucier,

Recommended Posts

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

  • Like 1
Link to comment
Share on other sites

  • Solution

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. 

  • Like 1
Link to comment
Share on other sites

Hi,

 

Thanks for your swift reply!

 

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

Link to comment
Share on other sites

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? 

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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.

 

 

 

  • Like 2
Link to comment
Share on other sites

  • 1 year later...
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

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×