tmbr

Yes, exactly! Thank you.

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!