Playing a separate animation at the end of a ScrollTrigger.
I'm trying to animate an image sequence using a canvas & ScrollTrigger in my CodePen. Out of the 600 frames, I have the first 200 mapped to the scroll position for 500vh. The last 400 frames can be seamlessly looped, which I've done in the loop animation.
What I'm ultimately trying to do, is seamlessly start playing the loop animation once the user scrolls to the bottom of the page/track element, but if the user scrolls back up enough (~10% offset), tween to the correct frame for
You can change the end to whatever you want, sure. You actually didn't even define and end, so it uses the default "bottom top". You had an invalid start too - "top" isn't a thing. It needs to define an intersection point with two values like "top top" to say "when the top of the trigger hits the top of the viewport".
But it sounds like you actually want to have the initial frame animation stop BEFORE the ScrollTrigger ends which is an entirely different thing. In that case, I'd put
