celli Posted January 8, 2022 Share Posted January 8, 2022 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 More sharing options...
PointC Posted January 8, 2022 Share Posted January 8, 2022 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 More sharing options...
celli Posted January 8, 2022 Author Share Posted January 8, 2022 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 More sharing options...
PointC Posted January 8, 2022 Share Posted January 8, 2022 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 1 Link to comment Share on other sites More sharing options...
celli Posted January 8, 2022 Author Share Posted January 8, 2022 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 More sharing options...
PointC Posted January 8, 2022 Share Posted January 8, 2022 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? 1 Link to comment Share on other sites More sharing options...
celli Posted January 8, 2022 Author Share Posted January 8, 2022 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 More sharing options...
GreenSock Posted January 8, 2022 Share Posted January 8, 2022 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? 2 Link to comment Share on other sites More sharing options...
PointC Posted January 8, 2022 Share Posted January 8, 2022 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. 2 Link to comment Share on other sites More sharing options...
GreenSock Posted January 8, 2022 Share Posted January 8, 2022 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. 🤷♂️ 1 Link to comment Share on other sites More sharing options...
PointC Posted January 8, 2022 Share Posted January 8, 2022 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. 2 Link to comment Share on other sites More sharing options...
celli Posted January 8, 2022 Author Share Posted January 8, 2022 Thanks for all the effort and knowledge here, it's very helpful ! Link to comment Share on other sites More sharing options...
Cassie Posted January 8, 2022 Share Posted January 8, 2022 via GIPHY 2 Link to comment Share on other sites More sharing options...
GreenSock Posted January 8, 2022 Share Posted January 8, 2022 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. 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 2 Link to comment Share on other sites More sharing options...
PointC Posted January 8, 2022 Share Posted January 8, 2022 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. 1 Link to comment Share on other sites More sharing options...
celli Posted January 8, 2022 Author Share Posted January 8, 2022 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 3 Link to comment Share on other sites More sharing options...
PointC Posted January 8, 2022 Share Posted January 8, 2022 Very cool @celli. Thanks for sharing. 1 Link to comment Share on other sites More sharing options...
Cassie Posted January 8, 2022 Share Posted January 8, 2022 Awesome! Love it! 🥳 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now