Jump to content
GreenSock

Indigo Slate UI

Nested timeline, onUpdate firing unexpectedly after first run

Go to solution Solved by GreenSock,

Recommended Posts

Hi folks!
I have a parent timeline consisting multiple child timelines with various durations and tweens.
I create the parent timeline empty and paused, then add child timelines in a for loop, adding pause at the end of each.

I use onStart and onUpdate methods to check the child timeline progress and update the progress bar styling on DOM, along other things.

First run is working as intended, but when I use parent.restart() or parent.seek("childLabel").play(), the onUpdate of the next child timeline fires at the end of current child timeline.
Behavior can be seen on console as well.
Any ideas why?

See the Pen LYQrqwp by bariscc (@bariscc) on CodePen

Link to comment
Share on other sites

  • Solution

Yeah, that's actually expected behavior. The first time through the playhead of each child hasn't ever moved or even established itself, thus no update...but when you play [at least] part of it and then REWIND the playhead past its start, that is technically a different state. You've got your tweens butted right up against each other so that the end of one IS the beginning of the other. So there's the "pre-tween" state, the "start", and the "end" (and of course the interpolated stuff inbetween). So when the playhead goes backwards past the start, it may need to render the "pre-tween" state.

 

EXAMPLE

  • element.x is at 0
  • You create a .fromTo(...) in a timeline that animates element.x from 100 to 200, and that child tween starts at 10 seconds into the timeline. 
  • So at the 10-second spot, it JUMPS from 0 (pre-tween state) to 100 (start) and starts animating toward 200.
  • Then you rewind the playhead back to 0 and play forward to 10 seconds and stop precisely there... 

...can you see why that tween would need to render? 

 

If you don't want that render to occur, then put at least a tiny bit of space on the timeline between your animations. So if your addPause() is at 10 seconds, for example, make the next tween start at 10.01 or something.

 

Again, as far as I can tell this isn't a bug - it's just a consequence of having your tweens butted right up against each other and stopping the playhead directly on that spot. 

 

Thanks for the minimal demo, by the way. 👍

  • Like 2
Link to comment
Share on other sites

@GreenSock thank you for the detailed explanation, that makes sense! I was actually suspecting this, but was puzzled to see the onStart call before onUpdate.

I also noticed having progress calculation only onUpdate also fixes my specific issue, but the actual fix seems to be having that small gap, thanks!

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