Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
rgfx

Timeline loop to specific time on complete

Go to solution Solved by Rodrigo,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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

  • Like 2
Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×