ScrollTrigger understading help

[leode5a7]

 

I’m still a bit mystified by ScrollTrigger and trying to harness it’s powers but failing to understand some key concepts…what I’m trying to do must have been done before but I just couldn’t find an example in my search. I’m fully aware that I’m misunderstanding some basic stuff of Scrolltrigger so apologies in advance if the demo looks stupid but it's just one thing I could come up with and I've been stuck with this for a few days now. What I’m currently trying to do is sequence a few individual animations for elements within container, so that each element’s animation start and end can be scrubbed sequencially within the scrolled duration of the container element. The animations can be anything but I want each duration to start and end within a designation division of the progress of the main container. For this I’ve pinned a container and attached a progressMarker element that I hope to use a scroll trigger for the elements to animate, so that when the progress marker is 10% from the top of the viewport I can animate an element from start to end from 10-50% then 50%-80% and so on. It is not working as I see the markers from the progress element are actually going the wrong way.

 

 

 

 

See the Pen wvJjBwr by leode5a7 (@leode5a7) on CodePen

[GreenSock]

Thanks for the minimal demo! Super helpful. 

 

Some notes:

1. One of the reasons ScrollTrigger is super fast/performant is because it pre-calculates the start/end scroll positions, so it's not constantly having to run getBoundingClientRect() on elements to figure out "has this element hit the right spot on the viewport yet?" It looks like your code was assuming you could use a trigger that's actually animated and make other elements get triggered based on when that animated element hits certain spots. That won't work. In general, don't animate your trigger elements.
2. You don't need to set paused: true on timelines with a ScrollTrigger. That'll automatically happen. It's fine if you do it, that's just wasteful. 
3. You can use selector text directly in your animations; you don't have to set variables at the top with document.querySelector(). It's absolutely fine if you do it that way, I'm just trying to save you some typing. 
4. I noticed you're using measurements that are based on the window.innerHeight which is fine but if you want things to be responsive and work correctly after the user resizes the browser, you should use function-based values and set invalidateOnRefresh: true on the ScrollTrigger so that it recalculates things. Otherwise, you'd lock in your values on the initial load. 
5. You didn't define any "end" values except on the first ScrollTrigger. You'd probably want to do that, but...
6. There's a much cleaner way to approach this - just put things into a single timeline and time them based on the ratios you want. So, for example, make your progressMarker tween take 1 second (to make it easy) and then if you want the ".a" animation to happen between 10% and 50%, just place that tween into the timeline at a time of 0.1 (10%) and make the duration 0.4 so that it ends at 50%. Then the ".b" tween can be inserted at 0.5 and have a duration of 0.3 so it goes from 50% to 80%, etc. 
7. You might want to try setting scrub to a number like 0.5 or 1 to get a smoothing effect. I just think it looks cool, but it's totally up to you. 

Here's a fork with the code simplified and corrected: 

See the Pen GRWdpJK?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that clear things up? 

[leode5a7]

That's soo powerful man! 😍  I had to look up that relationship to ScrollTrigger and duration which I totally missed at the bottom of the docs. Thank you so much, specially the tips on how to clean up my code...I got a lot right here, will play with this for a while.