Issue with pin spacing and white spaces

[bellaz]

Hi, I have a problem with subsequent pinned sections. 

It all worked fine when the sections had 100vh height, but now I need to reduce the height of the sections.

If I simply make the section smaller,  the pin creates huge white space around the pinned section, but if I set pinSpacing: false the second section overlaps the first.

 

How can I solve this?

 

 

Thank you very much.

See the Pen oNRwpov by BBsNic (@BBsNic) on CodePen

[Cassie]

Hey there, thanks for the clear demo!

 

The best way to get around this is to wrap the sections and pin a containing element.

Like so -

 

See the Pen NWVgYZR?editors=0010 by GreenSock (@GreenSock) on CodePen

I've tweaked the final cards trigger to use pinnedContainer so that the trigger positions aren't thrown off.
https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#pinnedContainer

 

Quote

pinnedContainer - Element | String - If your ScrollTrigger's trigger/endTrigger element is INSIDE an element that gets pinned by another ScrollTrigger (pretty uncommon), that would cause the start/end positions to be thrown off by however long that pin lasts, so you can set the pinnedContainer to that parent/container element to have ScrollTrigger calculate those offsets accordingly. Again, this is very rarely needed. Important: nested pinning is not supported, so this feature is only for non-pinning ScrollTriggers