Looping Timeline which doesn't play last nested timeline on final loop?

[ChazUK]

Hey, I'm trying to figure out a way I can setup a timeline to go from start to finish, run a reset timeline to make it perfectly loop and then repeat, but on the last repeat the reset timeline doesn't run.

 

Here's a rudimentary timeline to show what I mean.

start          end  pause  reset  start          end  pause  reset  start          end  pause  reset
  |_____________|____________|______|_____________|____________|______|_____________|............/

I'm guessing this can only be achieved by starting new timelines when the previous timelines fires its onComplete function? It'd be great to see it in a full timeline so I can check the animations with the DevTools plugin!

[Carl]

Hello and welcome to the GSAP forums,

 

If you just want a timeline to repeat a few times and then do something different at the end I would set up and repeating timeline with a callback that can play a custom animation when the repeat count reaches a certain value. In the example below the bottom flashes green after the final iteration.

 

See the Pen poeEmWP by snorkltv (@snorkltv) on CodePen

 

 

 

However, since you want to scrub in GSDevTools I would create the repeating timeline and scrub through it multiple times in another timeline using tweenFromTo()

 

In the example below the red box does not fade out (reset) on the last iteration which is what it sound like you want.

 

See the Pen ZEZoqBV?editors=1010 by snorkltv (@snorkltv) on CodePen

 

Both of these approaches are explained in detail throughout my GSAP courses if you are interested in gaining a deeper understanding.

 

Hopefully this gets you on the right track for now.

[ChazUK]

Hi Carl,

 

I was looking into maybe adding in a function call at the "end" point of the main timeline (which would be right before the reset) and then pausing the timeline whilst counting myself how many times it repeated, but your example using `tweenFromTo` looks like it makes a lot more sense and is more readable!

 

Thank you