dmo12

Perfect, this is exactly what I was trying to achieve. So you're tweening to the end of the loadTl when the scrollTl is triggered, and then using immediateRender to avoid those properties from getting set before it starts. Appreciate your quick response, and I'll use markers going forward.

I'm working on a project where I have multiple sections, each with an initial load in animation based on a normal timeline triggered by a ScrollTrigger, and a second ScrollTrigger-based timeline that animates the elements out of the section as the user scrolls down. Based on the CodePen demo, the default behaviour seems to be that if the user scrolls within the ScrollTrigger's start and end range before the initial timeline is complete, once they scroll again, the element position, opacity, etc. will be instantly set to the playhead of the ScrollTrigger timeline. Is there a way to tween that, so the transition between the loadTl and scrollTl is smooth?

Understood. One more question, is there a way to have the loop begin around when the end marker enters the viewport from the bottom? The frames don't really change from that point to the end marker exiting to the top, so it feels static until I hit the bottom.

@GreenSock Appreciate your quick response, you got it spot on! Just needed to remove the bottom margin, so the loop starts once you hit the bottom of the page, which was the intended behaviour. First time I'm seeing quickTo, I have a vague understanding from reading the doc. What's the benefit you get from using that over to in this case?

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 scroll position, and re-enable the scroll based playback. Currently I added some bottom margin to the track, and used onLeave and onEnterBack to start/stop the looping animation, but this requires the track element to scroll off the page first to start the animation. I'm sure there's a more ideal way to do this, would appreciate some help here.