Issue with scrollTriggered staggers inside timeline

[Michaël Garcia]

I'd like to play a specific step of my timeline depending on the section that enters the viewport.

It works great when I first scroll but as soon as I scroll back, my reverted step doesn't totally complete. My first staggered element doesn't reset.

 

Does anyone know what I'm missing ?

Thank you very much

See the Pen VwOyxdB by johnndoe (@johnndoe) on CodePen

[Rodrigo]

Hi

 

I'm o my phone now so I can't really play around with your demo. I believe the issue stems from the fact that you have a zero duration tween (which is basically a set() instance) standing at zero seconds of your timeline. That's always a tricky thing so the best approach I can think of is to add a dummy instance to the timeline before the loop in order to force the timeline play head to pass over that first set instance, something like this

tl = GSAP.timeline()

tl.to({},{},0.01);

 

Then run the loop.

 

Also a different and simpler approach would be to create a timeline for each section that is controlled by Scrolltrigger instead of controlling a single timeline with two different Scrolltrigger instances, that's IMHO overcomplicating things unnecessarily.

 

Hopefully this helps 

Happy Tweening!

[Michaël Garcia]

Hi @Rodrigo

Thank you for the detailed answer.

 

Unless I'm missing something here I can't do a timeline for each section. Because if I scroll fast, several reveal animations will play at the same time. In my case, if I scroll fast, animations will be added to a queue before playing.

 

You were right: tl.set caused the issue. I've found another work around : tl.to('', {duration: 0.001})
It's working great now. 

[Rodrigo]

Hi

 

You might want to have a look at the fast scroll end feature in Scrolltrigger 

 

https://gsap.com/docs/v3/Plugins/ScrollTrigger/#fastScrollEnd

 

Hopefully this helps 

Happy Tweening!