Green-Alpha Posted March 5, 2020 Share Posted March 5, 2020 Hello, On the pen, you can see a simple timeline and then 3 other timelines. I have to animate 2 elements with specific duration and play them at same time. When i set "0" for position on the "b", the next instruction is added after all "a" instructions. I think it's because when you specify a time the playhead is not affected, but i was surprised. I found the > but i have to add it on each element or create timelines. It's not really a problem but maybe i missed something to make it easier ? I didn't tested, but can we make many nested levels ? Thanks See the Pen PoqJLWa by Green-Alpha (@Green-Alpha) on CodePen Link to comment Share on other sites More sharing options...
Shaun Gorneau Posted March 6, 2020 Share Posted March 6, 2020 I have to admit ... I'm baffled by what you're trying to pull off here that couldn't be done with a single timeline.But to answer this question specifically Quote When i set "0" for position on the "b", the next instruction is added after all "a" instructions. I think it's because when you specify a time the playhead is not affected, but i was surprised. When you set an absolute position on any tween, you affect that specific tween relative to the entire timeline. Any subsequent tweens are still in their natural order. A simple natural order See the Pen BaNwbvb?editors=0010 by sgorneau (@sgorneau) on CodePen Here is one tween with a single position out of order See the Pen yLNzwWe?editors=0010 by sgorneau (@sgorneau) on CodePen Here is a tween set relative to the prior tween when the prior tween has a position label used See the Pen jOPGJjP?editors=0010 by sgorneau (@sgorneau) on CodePen But if you want to shift all subsequent tweens, I would just use a few different timelines and place those timelines in a single master timeline with 0 positions. See the Pen yLNzrNJ?editors=0010 by sgorneau (@sgorneau) on CodePen 6 Link to comment Share on other sites More sharing options...
OSUblake Posted March 6, 2020 Share Posted March 6, 2020 Side note. It's pointless to pause a timeline and then play it. It also confuses readers of your code. var tlCD = gsap.timeline({ paused : true }); var tlC = gsap.timeline({ paused : true }); var tlD = gsap.timeline({ paused : true }); ... tlCD.add(tlC.play(), 0); tlCD.add(tlD.play(), 0); tlCD.play(); Better. var tlCD = gsap.timeline(); var tlC = gsap.timeline(); var tlD = gsap.timeline(); ... tlCD.add(tlC, 0); tlCD.add(tlD, 0); 5 Link to comment Share on other sites More sharing options...
Green-Alpha Posted March 9, 2020 Author Share Posted March 9, 2020 Thank you for your answer, i'll use multiple timelines, in any way it's more clear. @OSUblake OK for the "paused" state, but I don't understand because after the timeline is created and an instruction is added, the animation start instantly, so with many instructions the animation will start before all instructions are registered, no ? And what if the last instruction's position is set to 0, like for repeating elements or other timeline ? Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 9, 2020 Share Posted March 9, 2020 11 hours ago, Green-Alpha said: with many instructions the animation will start before all instructions are registered, no ? I could be misunderstanding your question, but I believe the answer is no. JavaScript is synchronous, so everything has to finish before the animation can start. Parsing things is pretty fast, so you'd only have to worry about it if you have a lot of setup going on. And even then it'd likely only hang, not start animating some things and not animate other things. 11 hours ago, Green-Alpha said: what if the last instruction's position is set to 0, like for repeating elements or other timeline ? Not sure what you're asking. Can you try asking it using different words? Or maybe with a demo? 2 Link to comment Share on other sites More sharing options...
OSUblake Posted March 9, 2020 Share Posted March 9, 2020 14 hours ago, Green-Alpha said: OK for the "paused" state, but I don't understand because after the timeline is created and an instruction is added, the animation start instantly, so with many instructions the animation will start before all instructions are registered, no ? And what if the last instruction's position is set to 0, like for repeating elements or other timeline ? Animations are updated inside a requestAnimationFrame callback. And an requestAnimationFrame callback cannot happen while the browser is executing/parsing code. So no, animations will never start instantly. 4 Link to comment Share on other sites More sharing options...
Green-Alpha Posted March 9, 2020 Author Share Posted March 9, 2020 Thank you for this explanation Link to comment Share on other sites More sharing options...
GreenSock Posted March 9, 2020 Share Posted March 9, 2020 Yep, and just to further clarify, ALL of the code in a given code block will execute before GSAP moves the playhead forward (well, unless you FORCE something, like timeline.seek()). You don't need to worry that the playhead will creep forward over the course of code execution in a block. It waits for the next requestAnimationFrame to update its playhead position(s). 3 Link to comment Share on other sites More sharing options...
Green-Alpha Posted March 9, 2020 Author Share Posted March 9, 2020 Okay, now I have all informations, thanks for your fast and clear replies 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