Funny, I was wondering if it was possible to use a single timeline! I did read ScrollTrigger documentation, but it wasn't immediately obvious to me that the combination of endTrigger with two tweens could be used for this. Good to know!
Could you walk me through how the current solution works? What I think I know:
trigger: ".section-2", tells the animation where to start
endTrigger: ".section-4", tells the animation where to end
start: "top", tells the animation to start at the top of the trigger
end: "bottom", tells the animation to end at the bottom of the endTrigger
I'm uncertain about how it manages the multiple tweens between the trigger and endTrigger
t1.to(".target", {scale: 4});
t1.to(".target", {scale: 1});
It looks like it's trying to fit both animations within the space available between the trigger and endTrigger, but I'm not sure exactly how it divides the space.
From the ScrollTrigger documentation (quote below), I've gathered that it uses the duration of each tween to decide how to distribute the animation. If two tweens have the same duration, then I'd expect them both to take 50% of the available space between the triggers, but that doesn't seem to be the case in your pen (the first tween is taking much more space).
I made another fork and spammed it with additional tweens. What's strange is that the last tween ends in section 5, even when scrolling slowly. Given my (likely incorrect) assumptions of how the ScrollTrigger works, I would expect the last animation to end at the bottom of the endTrigger. https://codepen.io/studio-raz/pen/abRMBgV
Would love to know how this works in more detail! Any takers?