ScrollTrigger pin and scrub problems

[EricYuen 0 Likes (Newbie)]

Hi GreenSock, thank you for your amazing plugin for developer

 

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

 

https://codesandbox.io/s/infallible-framework-lqd4c?file=/src/App.js:1376-1396

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.

 

[akapowl 5,494 Likes (Superhero)]

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  

 

[EricYuen 0 Likes (Newbie)]

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?

[akapowl 5,494 Likes (Superhero)]

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?

[Cassie 5,658 Likes (Superhero)]

Heya! Pinning involves layout calculations so it's really important the DOM is loaded and painted in order for ScrollTrigger to calculate where everything should be.

Try swopping out your useEffect for useLayoutEffect

 

https://kentcdodds.com/blog/useeffect-vs-uselayouteffect/

[EricYuen 0 Likes (Newbie)]

Here is my problem when I using pin and scrub and also anticipatePin props. I don't think that is Reactjs Problem...

 

https://youtu.be/oGz_Gw_KIK8

[EricYuen 0 Likes (Newbie)]

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?

[Cassie 5,658 Likes (Superhero)]

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.

[EricYuen 0 Likes (Newbie)]

 

Thanks for your help

[Cassie 5,658 Likes (Superhero)]

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