ScrollTrigger: unpin element when scrolling up page, restart animation when scrolling back down

[tmbr]

We have a situation where we would like the following to happen:

 

1.) User scrolls down the page and triggers some animation, the progress of which is controlled using ScrollTrigger.

2.) This animation is pinned while it is running, and then releases at the bottom. We want the animation to be "slower" than just scrolling through the normal height of the trigger element, so we've been using end: "+=1500px" to increase the duration.

3.) When the animation completes, we want the user's scroll up experience to be completely different. We do not want the animation to run, and only want to show it in its "completed" stage. We also want the user to not have to scroll through all of the artificial padding/space that is added from the combination of end: "+=1500px", pin: true . We want them to only scroll through the height of the trigger div without the added padding.

4.) When they scroll back up the page above the element, the timeline resets, such that when they scroll back down it triggers the animation as normal.

 

The codepen should show all of this except #3. I have not found a way to remove the pinned element and padding while still keeping the timeline intact. Manually removing the styles with something like gsap.set(scrollDiv, {clearProps: true}); causes a significant "jump" down the page, resulting in a bad UX. I'm hoping that this transition will be seamless.

 

Is this possible? Thanks!

 

See the Pen KKREWVp by jhenley45 (@jhenley45) on CodePen

[GreenSock]

Is this what you're looking for?:

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

 

Notice that you've gotta manage the scroll position because if you rip out (disable) that ScrollTrigger that added the pinSpacing, it'll collapse the page and the scroll position will completely change. Same for re-enabling it. 

[tmbr]

Yes, exactly! Thank you.