Timeline loop to specific time on complete

[rgfx]

New to Gsap, I have been looking forever for way to loop to specific time or label. 

 

My example is not a slider, there will be animations between each background fade, I removed absolute position on .slide for the sake of testing.

 

When the animation first loads it will fade in from nothing, but it can not do this when it loops around again it should start from lets say 5 seconds in.

 

Not sure exactly how to go about doing this. Create two timelines, with the opening fade, then trigger the next timeline on complete then loop. 

 

In my days of flash there was a gotoAndPlay(frame); 

 

Please forgive my lack or understanding, am sure its something simple. Just like to know the best approach. 

 

Many thanks. 

See the Pen fstAp by rgfx (@rgfx) on CodePen

[Rodrigo]

Hi and welcome to the GreenSock forums.

 

First thanks for the codepen sample, it makes things quite easier.

 

There are quite a few ways to accomplish this, the one that pops right into my mind is using the play() method indicating whether a label or a specific time, like this:

//using a label
var tl = new TimelineLite({onComplete:restartLine, onCompleteParams:["label"]});

//using a specific time
var tl = new TimelineLite({onComplete:restartLine, onCompleteParams:[time]});

function restartLine(position){
  tl.play(position);
}

Like that every time the timeline completes it'll jump right to the position you indicate. If you'd like to make it a bit more dynamic you could pass a variable to the function (in this case you won't need the onCompleteParams property) and change the value stored in the variable as you wish, something like this:

//using a label
var tl = new TimelineLite({onComplete:restartLine}),
    position = "labelName";

//using a specific time
var tl = new TimelineLite({onComplete:restartLine}),
    position = 3;//plays the timeline from the 3 seconds mark

function restartLine(position){
  tl.play(position);
}

I set up a simple codepen using the onCompleteParams property in the timeline config object, but you can change it very easily:

 

See the Pen DHhoA by rhernando (@rhernando) on CodePen

[rgfx]

knew it was something simple, simple as it is I bet it will help a few people. I have read many of your post through my adventures of getting my head around gsap, thanks for being there maestro