Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Green-Alpha

Timeline playhead position

Recommended Posts

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

Share this post


Link to post
Share on other sites

      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

 

  • Like 6

Share this post


Link to post
Share on other sites

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

 

  • Like 5

Share this post


Link to post
Share on other sites

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 ?

Share this post


Link to post
Share on other sites
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?

  • Like 2

Share this post


Link to post
Share on other sites
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.

  • Like 4

Share this post


Link to post
Share on other sites

Thank you for this explanation :)

Share this post


Link to post
Share on other sites

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

  • Like 3

Share this post


Link to post
Share on other sites

Okay, now I have all informations, thanks for your fast and clear replies

Share this post


Link to post
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.

×