Jump to content
Search Community

TimelineMax Go to Label and Play Inconsistency

Design by The Rues LLC 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



I posted once before about a similar problem, and I was able to workaround that problem easily, but this one is a tad different.


In the codepen sample I provided, there are 6 color blocks. Each one is animated in its own timeline, and each timeline is then nested in a master timeline.


In this master timeline, I set up a pause at the end of each nested timeline, so that playing the timeline only plays one scene (or, in this example, one animation) at a time, then pauses and waits for the user to press "continue". It is also paused at the start, so you must press "continue" to see the first block.


In the linear sequence, all is well: run the codepen and press continue at the end of each block's animation and the blocks animate in when and as expected.


The following steps, however, cause a problem:


1. Run the codepen

2. Press continue to display the red block

3. Keep pressing continue and finish the sequence so that all blocks are on-screen

4. Press the button labeled "Orange" and see the orange block animate in as expected

5. Press the button labeled "Blue" and see the green block animate in


As you can imagine, the blue block should have been the one to animate in.


In addition, I am firing events on each block animation's start and finish, and the events fired for step 5 are two start events for the "green" block and 1 finish even ("green-done") for the green block. The "blue" event never fires.


I'm at a loss. Anyone have any idea why this isn't working, or what I'm doing wrong?


Effectively, having these "jump-to-scene" buttons is crucial for a project, so any help would be very valuable.




See the Pen zxxpJp by frankrue (@frankrue) on CodePen

Link to comment
Share on other sites

Diaco -


Wait, I just realized that the "triggerLabelEvent" function is no longer firing with the parameter it is supposed to be passed. Instead, "label" is undefined.


Not only that, but it appears to fire 6 times in a row at the very beginning, but doesn't fire at all on the button presses.


Lastly, the function I had running to create a "-done" label appended at the end of that sequence was commented out, so that events like "red-done" do not fire.


All of these are necessary for my application to get correct reporting. When all put together, the order is unpredictable.


Are you sure that addCallback() is the correct order of parameters? I had previously thought that, as per the docs, the first param was the function, the second param was the position, and the third param was the array of parameters to be passed to the function, yes?


I've put the correct parameter order back in for the addCallback, and now the labels fire and the animation looks correct, but you'll see that the labels fire in an odd order when pressing the buttons for each color to play them out-of-order.


See the Pen XJJEQd by frankrue (@frankrue) on CodePen




Link to comment
Share on other sites

ooops , my bad ! . i didn't check the console last time  , sorry about that , that fixed :)


with .seek() you can jump in timeline , but check this :


console.log(master.getLabelTime("yellow-done") + "-" + master.getLabelTime("green") );
you have two label at same time !
that's why "label-done" fired twice and you cant trigger labels correctly . 
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...