Second ScrollTrigger animation start does not start at intended point + white space created by pin spacer

[animationmagic]

Hi everyone!

 

I've got 2 issues:

1. The second ScrollTrigger animation on my page (the purple section) has their markers off. Although it is set to start "top 0" it starts way below.

2. The second animation has lots of white space underneath it created by the pin spacer. Is there a way to hide that scroll space?

 

Thanks so much! 

See the Pen porzpRo by lisaschumann (@lisaschumann) on CodePen

[akapowl]

Hey there @animationmagic

 

1. By disabling the first ScrollTrigger onLeave and thus removing the pinSpacer, you are changing the height of the document and since that second ScrollTrigger's start will be set when the pinSpacer of the first ScrollTrigger is still there, you would actually have to call a ScrollTrigger.refresh() after disabling the first ScrollTrigger, so the start of the second ScrollTrigger can be set again to its now correct value.
    
2. Usually you'll just want to wrap all your content inside a wrapper and pin that wrapper if you don't want any pin-spacing to be visible in cases as such. Now in your scenario with the first ScrollTrigger that is being disabled onLeave things will be sort of tricky if you wrapped all the content, so I'd suggest just wrapping the portion of content after that first section you are pinning individually before in a wrapper and pin that.
   
   Something like this:

See the Pen 8c708012c35eff9fc01c5b89265d7a0d by akapowl (@akapowl) on CodePen

 

 

 

Please note though, that if you will add any subsequent ScrollTriggers on elements inside that .second-pin wrap, you will likely have to specify that wrap within the pinnedContainer property on those subsequent ScrollTriggers, as they can not take any pinSpacing into account because they will be within that wrap. I hope that's helpful, happy scrolling!