Jump to content


ScrollTrigger pin and scrub problems

Moderator Tag

Recommended Posts

Hi GreenSock, thank you for your amazing plugin for developer


I have two problem when using scrub and pin, here is my demo 



The demo should demonstrate on 'open the new window' case


1. When enter the demo and instant scroll to second Section, there are some flash on second section when enter secoind section everytime, what's the reason cause the flash?


2.When you modify src/App.js and 'TwoSection.js' - StyledContentContainer ->height: 100vh to auto; and run again, how can i pin the second section align to first section?


Any advice can help me? thanks a lot.


Link to comment
Share on other sites

Hey @EricYuen


1) Maybe you are looking for anticipatePin? This explanation is from the ScrollTrigger docs.


anticipatePin Number - If you pin large sections/panels you may notice what looks like a slight delay in pinning when you scroll quickly. That's caused by the fact that most modern browsers handle scroll repaints on a separate thread, so at the moment of pinning the browser may have already painted the pre-pinned content, making it visible for perhaps 1/60th of a second. The only way to counteract that is to have ScrollTrigger monitor the scroll velocity and anticipate the pin, applying it slightly early to avoid that flash of unpinned content. A value of anticipatePin: 1 is typically fine, but you can reduce or increase that number to control how early it does the pinning. In many cases, however, you don't need any anticipatePin (the default is 0).



2)  Do you mean the white space that will be visible under the first section in that case (height: auto)?


That is the pin-spacing added by ScrollTrigger. If you want to pin things and keep everything visible in place while pinning, it would probably be best to wrap your content and pin that wrapper instead of the section.  Maybe take a look at this recent thread for an example 



You will have to consider using the pinnedContainer property for subsequent following ScrollTriggers withing that same wrapper, because they won't be able to take that pin-spacing of the previous pin into account for their start/end as they are within that pin-spacer.


I Hope that helps :) 


  • Like 3
Link to comment
Share on other sites

Thank you for your reply. The first problem may not fix when I using anticipatePin and set 1.It cause another problem when I refresh and instant scroll to second section. The second pin start point has jumped. Is it impossible to prevent this problem?

Link to comment
Share on other sites

Sorry, I don't think I entirely understand.


Are you saying when you set a anticipatePin, the start point of the second section's ScrollTrigger shifts? I can't imagine why that should be the case, to be honest. But I'm also not familiar with React at all - and maybe it's to do with how you do things with regard to React.


So maybe someone with more React knowledge could have a look?

  • Like 1
Link to comment
Share on other sites

Thanks Cassie, I had try to use 'useLayoutEffect' instead of useEffect, but the problem still cause, have you try and can you reproduce my problem? What do you think about the issue?Is really cause by ReactJS?

Link to comment
Share on other sites

I can't see the video (private) and I can't see any issues in your sandbox so I don't really know how to help here, sorry.

Link to comment
Share on other sites

I'm not sure what I'm looking at? I can't reproduce any issues in your sandbox.

  • Like 1
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.