Update Problems： Confused of the onUpdate function trigger time

[gloria-dee]

Hi guys， an update timing  problem was encountered in my project. I wrote a simplified version in the codepen.

 

As is shown in the codepen, the demand is like this.

1、Every time I click the play button, a corresponding sequence of animations will be played.

2、The animations can be played in a loop.

 

In my real project ,  the animation which has the same order will be placed into the same childTimeline. The masterTimeline controls all the childTimelines.

In the simplified version, we can see that :

1.  Box1's animation is order 1. Box2's animation is order 2. Box3's animation is order 3.

2. We hope when the play button is clicked , the animation will be played by order .  Like this:   order1  →  order2  →  order3  →  order1  →  order2  →  order3  →  order1  →  order2  →  order3   →  ...

 

What confused me most  is the following.

 

In the first loop, order1  →  order2  →  order3,  the update time of each order is right.

But in the second loop， order1  →  order2  →  order3，the update time is not expected. When the order1's animation has been played, the order2's onUpdate function will be triggered once. When the order2's animation has been played, the order3's onUpdate function will be triggered once.

 

Why the next order's onUpdate function is triggered? And how to prevent the next order's update function from being triggered after an animation is finished?

 

Hope for your reply.

Many thanks.

 

 

See the Pen oNpeOjr by gloria-dee (@gloria-dee) on CodePen

[OSUblake]

Thanks for demo. Something definitely seems a little off. Please standby while we investigate.

[GreenSock]

I don't think that's a bug, actually, but perhaps I'm missing something. This is always the dilemma when you place things at EXACTLY the same time on the timeline. So, for example, if tween1 ends at exactly 1 second on the timeline, and tween2 starts at precisely the same time and you make the playhead land on exactly a time of 1, both of those tweens technically touch that point and should be rendered, right? That's why you're seeing that behavior. A simple solution is to just add even a tiny amount of space between them so that they don't occupy the same spot. Even 0.001 second should be okay. Or just tween to a spot that is ALMOST to the next label (but not quite there): 

master_timeline.tweenFromTo(startLabel, endLabel + "-=0.001");

Does that clear things up?