Interrupting a tween resulting in inaccurate state earlier in timeline

[onedesign]

I'm working on a large animation right now, and I'm experiencing a recurring issue where interrupting the progress of a tween results in an odd state for the element when the timeline is scrubbed back or repeated.

 

In the attached CodePen, for instance, we tween the alpha of an element from 0 to 1, but then halfway through we interrupt that tween with another to change the alpha to zero. The whole thing plays correctly the first time, but on subsequent plays the alpha of the element starts at nearly full on the first frame of the timeline.

 

Is there something special I need to do when interrupting tweens in this way? Thanks!

See the Pen 564325ad1c25eb0ef02c2b41a14fc7ef by cmalven (@cmalven) on CodePen

[onedesign]

I think I found an answer in the docs that I missed on the first pass.

overwrite: 'none'

Is that a logical way to handle this situation?

[Carl]

Yup, that is the recommended solution.

 

When 2 tweens fight for control over the same properties of the same object, the engine will automatically overwrite (kill) the first one as a performance optimization. it is usually wasteful for 2 tweens to be fighting at 60 times per second. In your case setting overwrite:'none' on the second tween will bypass the default overwrite mode of auto.

[onedesign]

Thanks for the explanation, Carl!