Hi! ?
I’m having a slight issue with pinning full-screen sections in combination with snapping (using the approach from this demo: https://codepen.io/GreenSock/pen/NWxNEwY).
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: https://codepen.io/GreenSock/pen/KKpLdWW. 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!
