Jump to content
GreenSock

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

clear a timeline in a master timeline

Recommended Posts

I have multiple timelines (4) in this codePen demo which all play consecutively from a master timeline.

 

The second timeline has a tween that plays further than the end of the last timeline, so the repeat on the master timeline is waiting for the second timeline to end before repeating—in the case that I have I'd like to actually repeat my 'master' timeline either at a certain timestamp of the master timeline (at 4 seconds in this case) or somehow clear the second timeline at a certain point in the master, so that the master timeline can repeat directly at the end of my last timeline in the master so that the looping appears seamless (even though a hidden element is still rotating).

I am sure there is a way to accomplish this, but I can't find a good way to do it—if anyone can shed some light that would be fantastic.

 

 

See the Pen KKXBzWW by celli (@celli) on CodePen

Link to comment
Share on other sites

I'm not quite sure I follow, but you could use a negative repeatDelay.

 

let masterCR = gsap.timeline({repeat:-1, repeatDelay:-1});

Does that help?

Link to comment
Share on other sites

Hi PointC, thanks for the reply. Yes, I tried a negative repeatDelay before, and while it kinda works, it throws off the master timeline and doesn't play everything in sync as we get into more than 2 loops.

 

It's basically that I have a timeline in the middle of my Mater Timeline that is playing past the last timeline. While each of it's elements are not visible anymore, they are still rotating (I am doing this to get a subtle, but important timing effect on the rotation in my actual project), and taking up time for the master timeline to calculate.

 

What I would like to do is kill() the second timeline at a place within the master timeline, but I can't see a way to do that efficiently—and if I do do that then the timeline that has been killed is not available to play when the master timeline loops again.

 

Maybe there is a way that I can restart the masterTime onComplete of my last timeline ? And control the master timeline restart from there ? (I edited the codePen with commented out code where you can see I try this, but it throws the master timeline's looping out of sync)

 

Link to comment
Share on other sites

Still not sure I'm following correctly. Or maybe it's weekend brain. 🤷‍♂️

 

You could create the longer timeline separately and just use a call in your main timeline to play it. Something like this maybe.

See the Pen f1d052fa8b01d55a870f415592edd6af by PointC (@PointC) on CodePen

  • Like 1
Link to comment
Share on other sites

Thanks PointC, that does give the result I was looking for.

What does the 'null' refer to in the code below, and I  assume we are then specifying an exact time with the '1' that this will play for (in this case 1 second) ? 

call(otherTimeline, null, 1)

The only thing I notice is in GSDev Tools the timeline is very long, and it's not really naturally looping, instead it's one very long timeline.

Link to comment
Share on other sites

14 minutes ago, celli said:

What does the 'null' refer to in the code below,

That's the array of params for the function. In this case we have none so we use null. This is necessary in this case as we are using the position parameter. From the docs.

.call( callback:Function, params:Array, position:* )

 

14 minutes ago, celli said:

I  assume we are then specifying an exact time

Correct. The call will take place at 1 second. You can use absolute times, relative times, labels, etc.

 

14 minutes ago, celli said:

this will play for (in this case 1 second) ?

The call will play the timeline from 0. It could be a 1 second timeline or a 60 second timeline. Doesn't matter. It won't affect the overall duration of the master timeline. We're just saying at 1 second into the master to play the extra timeline from its own start point. 

 

14 minutes ago, celli said:

The only thing I notice is in GSDev Tools the timeline is very long, and it's not really naturally looping,

That's because we have infinite repeat on the master. You can also use no repeat and set GSDevTools to loop like this.

 

See the Pen ab4cd62686afdf42473734ebd0f3fee4 by PointC (@PointC) on CodePen

 

 

Make sense?

  • Like 1
Link to comment
Share on other sites

Thanks PointC, Sorry I mis-typed about the position parameter at 1, yes I totally get that.

 

So essentially because we are using 'call' instead of 'add' the call is not included in the overall length of 'time' of the master timeline ? And this way we can call this particular timeline instead of actually adding it to the overall time of the master timeline, is that correct ?

 

Link to comment
Share on other sites

9 minutes ago, PointC said:
21 minutes ago, celli said:

What does the 'null' refer to in the code below,

That's the array of params for the function. In this case we have none so we use null. This is necessary in this case as we are using the position parameter. From the docs.

.call( callback:Function, params:Array, position:* )

 

Pro tip: you can just use the .add() method if you're not passing any parameters: 

 

// old
.call(func, null, 1); 

// new
.add(func, 1);

The .add() is smart enough to figure it out. Works the same for labels as well. It checks the type of the object that's passed in. 

 

3 minutes ago, celli said:

So essentially because we are using 'call' instead of 'add' the call is not included in the overall length of 'time' of the master timeline ? And this way we can call this particular timeline instead of actually adding it to the overall time of the master timeline, is that correct ?

 

Sort of. If you nest an animation in a timeline, of course its duration will get factored in (because it's inside of it), but doing a .call() is merely adding a callback - a function call - at a particular spot. That has no duration whatsoever. It's just a function call. See what I mean? You just happen to be calling a function that starts a different animation but the timeline doesn't know or care about that. 

 

Make sense? 

  • Like 2
Link to comment
Share on other sites

Looks like @GreenSock beat me to it, but yeah - add() will work just fine here too. I was just throwing out call as an option since it sounds like you might have something more complex going on in the final project. But here's a fork with add(). I upped the duration of the extra timeline to a ridiculous number just so it's obvious that it's not changing the duration of the master.

 

See the Pen a05cb90ba6666b21bf151de6a407f758 by PointC (@PointC) on CodePen

 

Happy tweening.

:)

 

  • Like 2
Link to comment
Share on other sites

1 hour ago, PointC said:

you could use a negative repeatDelay.

 

let masterCR = gsap.timeline({repeat:-1, repeatDelay:-1});

 

I actually wouldn't expect a negative repeatDelay to work, no. That'd be kinda weird - like the timeline would never actually reach its end. There'd be a chunk at the end that's literally serve absolutely no purpose whatsoever (it'd always get ignored if that code worked). And what would happen if you do timeline.progress(0.95) or something that attempts to put the playhead in that overlap area? And would totalProgress() and totalDuration() factor that in? The logic could get rather mind-bending. In all my years I don't think I've ever needed that kind of thing. 🤷‍♂️ 

  • Like 1
Link to comment
Share on other sites

ha. true. could get a little timey-wimey. Not sure why I thought would work. 🤦‍♂️ 🤷‍♂️

 

Leave me alone - it's the weekend. I should be napping. :D

  • Haha 2
Link to comment
Share on other sites

Thanks for all the effort and knowledge here, it's very helpful !

Link to comment
Share on other sites

10 minutes ago, PointC said:

ha. true. could get a little timey-wimey. Not sure why I thought would work. 🤦‍♂️ 🤷‍♂️

 

Leave me alone - it's the weekend. I should be napping. :D

 

Gosh, I hope that didn't come off as "duh"! Totally didn't mean it that way. I can absolutely see why in some cases a negative repeatDelay could be helpful. Since my head is in the plumbing all day, I tend to just look at it through that lens :)

  • Like 2
Link to comment
Share on other sites

Just now, GreenSock said:

Gosh, I hope that didn't come off as "duh"! Totally didn't mean it that way.

Not at all. :)

 

I've never tried it. (or had a need to try it) It was just the first thing that popped into my head. 

  • Like 1
Link to comment
Share on other sites

Also, here is an unfinished codePen of what I was trying to accomplish with the subtle timing, using the solution.
Thanks again, all of this is (as always) super helpful. 

See the Pen GRMXNoz by celli (@celli) on CodePen

  • Like 3
Link to comment
Share on other sites

Very cool @celli. :)

 

Thanks for sharing.

  • Like 1
Link to comment
Share on other sites

Awesome! Love it! 🥳

  • Like 1
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.
×