1-pixel scroll delay before pin is activated

[Loz Calver]

Hi! 😃

 

I’m having a slight issue with pinning full-screen sections in combination with snapping (using the approach from this demo: ).

 

When the “snap” activates, it scrolls to the exact position where the section takes up 100vh. So far so good, but the section is pinned and it doesn’t receive position: fixed; at this point - that is only applied when the user begins scrolling to the next section. This results in a flicker (especially noticeable on mobile devices) as the user starts scrolling so the element moves, then position: fixed; is applied and the element snaps back to its original position.

 

It’s quite a simple page so the flicker isn’t obvious, but I can show the issue with the layered pinning demo: 

See the Pen KKpLdWW by GreenSock (@GreenSock) on CodePen

. Steps are:

 

• Inspect the demo with web inspector
• Highlight the <section>ONE</section> section
• Scroll 1/4 of the way down from the initial blue screen - enough to trigger the snap to the next section
• Allow the snap scrolling to take place - notice that at this point <section>ONE</section> still doesn’t have position: fixed; despite it being in the position where the “pin” should begin
• As soon as you begin scrolling down, even 1px, position: fixed; is applied

 

I had hoped that calling ScrollTrigger.refresh() when the snap completes would cause the pin to be applied but it doesn’t seem to help. anticipatePin doesn’t seem to help either.

 

For now I’m working around it by using { start: 'bottom-=1 bottom' } instead of { start: 'bottom bottom' } (in my project I’m using bottom instead of top in case the section is taller than the user’s viewport)

 

Thanks!

 

See the Pen NWxNEwY by GreenSock (@GreenSock) on CodePen

[Cassie]

Hello there!

 

Thanks for the really clear demo and explanation, what a dream. hugely appreciated.

 

Paging @GreenSock on this one to either explain or investigate 😎