Jump to content
Search Community

Simple replay and looping of multiple timelines

celli test
Moderator Tag

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

Hi,

 

I am just trying to get multiple timelines or even one time line to loop using restart(); As you see in the codePen, the timeline just stops, but doesn't loop. This is one timeline of many sequencing timelines, How can we get them to loop after the last timeline has played ?

See the Pen bpkvH by anon (@anon) on CodePen

Link to comment
Share on other sites

The easiest way is to just tell it to repeat infinitely in the vars parameter of the constructor:

var tl = new TimelineMax({repeat:-1}); //-1 means infinite, but you could set it to a specific number of times to repeat, like repeat:2

Or, you could use an onComplete like this:

var tl = new TimelineLite({onComplete:function() {
    tl.restart();
}});

The problem with your code was that you literally put the restart() call immediately after your instantiation code, meaning nothing had even animated yet - you just told it to restart immediately...before it started. 

Link to comment
Share on other sites

I put the first code to infinitely loop, and it works, but it overlaps my other timelines as it is looping and it doesn;t wait for the last timeline to end before restarting.

 

So I tried the onComplete like this

var t4 = new TimelineLite({onComplete:function() {
    tl.restart();
}});

because I want the first timeline to start after the fourth timeline is complete, but it doesn't restart at all. Is there a way to wait for all 4 timelines to finish, and then restart at the first timeline again ?

Link to comment
Share on other sites

There are many ways to achieve that, yes. As you suggested, you could just use an onComplete on your 4th timeline that calls a function that calls restrart() on your first timeline. If that's not working, please provide a codepen that we can look at because there must be something else going on in your code that's preventing it from working. Another option is to place your timelines into a parent timeline that repeats (or has a call() at the end that restarts). 

 

Have you watched Carl's videos about timelines and the position parameter? It might really help you. 

http://greensock.com/position-parameter

http://greensock.com/sequence-video

Link to comment
Share on other sites

I watched the videos about the position parameter, but I didn't see anything about the repeating multiple timelines. Here is another code pen that shows the onComplete event not working. I am trying to get it to restart timeline 1 after timeline 2 is complete in this codePen

See the Pen AyFxu by anon (@anon) on CodePen

 I am not even sure I am nesting these timelines right in this code pen.

Link to comment
Share on other sites

You weren't nesting timelines at all in that example. I'm actually not sure why you're even trying to separate things into different timelines, but I'll assume you have a good reason (if you just want to sequence things, you can easily build up a single timeline with as many tweens as you want).

 

Anyway, you were completely re-defining your entire tl2 timeline at the end, adding the onComplete to a totally empty timeline, thus it basically got called right away. 

 

I think this might be what you were trying to do: 

http://codepen.io/GreenSock/pen/0d6ec0983b884493adc56d9a2f7f9b2f/?editors=001

 

I used an eventCallback() method  to add the onComplete, but I could have just as easily added it in the constructor at the top in the vars like {onComplete:function() {...}}, but I was trying to honor the flow of your code. 

 

I'm also not entirely sure what your goal was with the tl2.delay(.5) thing - if you wanted to add a 0.5 second gap between the animations, let me know and we can talk through that. 

Link to comment
Share on other sites

thanks, it's starting to make more sense now. The delay and separate timelines were from the larger project, I just pasted a snippet into codePen, so we can ignore those -- but the codePen now only restarts and plays the first timeline once more, and doesn't 'loop' I was looking for the code to reStart and play all timelines in sequence, infinitely, so I am still confused about how to make that happen...

Link to comment
Share on other sites

i'm jumping in a little late but if you simply want to "restart and play all timelines in sequence infinitely" this should work:

//create 3 timelines
var box1Timeline = new TimelineLite();
box1Timeline.to("#box1", 1, {rotation:360})
.to("#box1", 1, {opacity:0})


var box2Timeline = new TimelineLite();
box2Timeline.to("#box2", 1, {top:100})
.to("#box2", 1, {opacity:0})


var box3Timeline = new TimelineLite();
box3Timeline.to("#box3", 1, {rotation:-360})
.to("#box3", 1, {opacity:0})


//create a repeating TimelineLite
var masterTimeline = new TimelineLite({onComplete:function() {
   masterTimeline.restart();
}});

//add 3 timelines to masterTimeline in direct sequence
masterTimeline.add(box1Timeline)
  .add(box2Timeline)
  .add(box3Timeline)

http://codepen.io/GreenSock/pen/symha/?editors=001

 

That code creates 3 separate timelines and adds them to masterTimeline in sequence using the technique discussed here.

masterTimeline has an onComplete callback that tells itself to restart. Or like Jack pointed out, you could make masterTimeline and TimelineMax and give it {repeat:-1}

 

 

 

  • Like 4
Link to comment
Share on other sites

yes, this works perfectly! I do see what you mean about having multiple timelines for smaller projects not being necessary. I was using multiple timelines to better organize my animations (giving each splitText sequence for example, it's own timeLine) But I guess there is a better way -- I did collapse everything into one timeline eventually per your suggestion. Can I send you a link to see if I am organizing my timelines and GreenSock JS code in general correctly ? I didn't want to post it here since it uses some of the member plugins, thanks.

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.
×
×
  • Create New...