Raz Pulurian

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?

Hey there. Loving the work you all do! First time poster here. I want to animate an element in and out with scroll triggers. For example: A site with 5 sections From the start of section 2 to the end of section 2, I want the element to increase in size From the start of section 4 to the end of section 4, I want the element to decrease in size I want the animation to be a bit smooth, so I'm using a scrub value of 2 I've attached a minimal codepen demo with what I have so far. When I scroll slowly, everything works brilliantly in both directions. When I scroll down fast, it also works brilliantly. But if I'm at the bottom of section 5 and I scroll up fast, the element size pops. Ideally, I would like the fast scroll up to behave like the fast scroll down. I've tried using preventOverlaps: true on my scroll triggers, but that creates a different sort of pop. I believe this is because it forces the previous timeline to its end position when the new timeline starts. I also read the most common scroll trigger mistakes, but I didn't find anything there that helps in my case. Worth noting that my actual project uses timelines with multiple tweens to control Three.js objects, but I'm able to reproduce the issue with the minimal demo attached. As it seems to work when I'm fast scrolling down, I'm sure I'm missing something basic to make it work in the opposite direction. Any tips?