Continuous Pinning after Animation

[sandman]

In the example provided, I am trying to keep the first div pinned after the animation plays in the timeline.  If I set the end to a greater percentage, it just extends the timeline out.  I'd like to pin the dive, run the timeline, and then keep the dive pinned so the next div will scroll on top of the first div.  If I set pinSpacing to false, the animation and scroll happens at the same time.  I'm not sure how to do this.

 

Thanks!

See the Pen poZRyqr by sandman18 (@sandman18) on CodePen

[GreenSock]

It's a tricky scenario because technically you want the animation to "finish" but the pinning has to keep going for longer (while the next section scrolls up over the top). So you need to do a little math and...

1. Set the next section to overlap by 100vh, so margin-top: -100vh
2. Add some extra space to the end of the timeline so that your "real" animation appears to finish and then nothing else is happening in the animation while the next section scrolls up over the top.

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

 

Is that what you're looking for?