pinSpacing for element shorter than 100vh

[Michael Baumer]

When pinning elements that are shorter than 100 viewport height, there is whitespace added below the pinned element. For elements 100vh or larger this is a non issue since the whitespace is below the fold.

 

However, if I want to pin an element that doesn't take up the whole viewport, how can this be accomplished?

See the Pen MWQYejW by rmbaumer (@rmbaumer) on CodePen

[GreenSock]

You can just wrap your content in a <div> and pin that instead: 

See the Pen VwQYKYE?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Is that what you were looking for? 

 

Obviously you can set pinSpacing: false but then you'll end up with the content below colliding with the pinned content. 

[Michael Baumer]

Hi Jack - that's exactly what I was looking for, thanks! Pinning the additional wrapper works great in the codepen but not for my actual usecase. I'll do some more testing and see if I can isolate why.

[Michael Baumer]

I think the issue I'm running into is pinning multiple animations within the wrapper. When I use the wrapper approach, the start/end markers on subsequent animations aren't being calculated as expected. It looks like the height of the pinned sections is not being accounted for:

 

See the Pen eYVmgBN by rmbaumer (@rmbaumer) on CodePen

 

So, if I don't use a wrapper, the animation start markers are correct but there is whitespace below. If I use a wrapper, there is no whitespace, but the start marker is off for all subsequent animations.

 

Is there a way around this?

[akapowl]

24 minutes ago, Michael Baumer said:

Is there a way around this?

 

Yes, the pinnedContainer property. You'll need to set it for every subsequent ScrollTrigger within the same wrapper and thus the same pin-spacer.

 

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. (added in 3.7.0)

 

[Michael Baumer]

Yay, up and running now! Thanks @akapowl for gently pointing that out and including the doc reference, which I had previously read but failed to grasp  Seems obvious now... thanks again.

 

See the Pen oNEgrOp by rmbaumer (@rmbaumer) on CodePen