Unpin ScrollTrigger animation when scrub has completed

[Kobe]

Hi, I've hooked up a Lottie animation to ScrollTrigger with a numerical scrub (smoother). This works great but at the end of the animation, the ScrollTrigger unpins before the animation has been fully completed. Is there a way to unpin the ScrollTrigger only after the scrub has completed?

I've already experimented with fastScrollEnd but this is still not quite the effect I'm looking for.

 

Any help will be greatly appreciated!

See the Pen WNdmepp by KobeIndemans (@KobeIndemans) on CodePen

[GreenSock]

I'm not entirely sure what effect you're going for, but you could just add some extra time at the end of the timeline if you're trying to give it extra wiggle room, like tl.to({}, {duration: 10});

 

Ultimately, though, since it's scroll-triggered, it's tied to the scrollbar position. You can't just say "abruptly stop the scroll at this point and don't allow the user to scroll anymore until my animation is done". Well, you probably could wire up some logic to do that but I'd strongly recommend against that. It sounds like terrible UX

[Kobe]

Thank you Jack! The extra wiggle room in combination with fastScrollEnd comes closests to the effect I was looking for. I guess the interaction between a numerical scrub (time delay) and scroll position is always a tricky one, especially with the transition from black to white background in the end.