Rebuilding the very same timeline causes it to play differently

[Mia+Lily]

Hi GSAP people!

 

I'm working on a code that lets users build and customize animations. To get a consistent behavior, I'm keeping a reference to the animation timeline, `kill`ing it every time user changes some params and then rebuilding it again. But I noticed that even with the same inputs, the rebuilt animation doesn't look the same.

 

After narrowing it down to the smallest sample possible, it seems that there's something wrong with the timing. Upon first page load, everything looks as intended. But after I rebuild the timeline, it seems like its time got compressed somehow. It still plays the defined tweens, but it doesn't respect the timing.

 

Interestingly, rebuilding the timeline multiple times doesn't accumulate the time twisting.

 

I tried inspecting the timeline object, but haven't found anything supicious. The durations and start times look correct. Even when using a progress bar (in my project) to visualize the playback, it indeed plays linearly, but the actual tweens do not.

 

Everything should be clear from the attached pen.

Thanks in advance!

See the Pen yEEQzZ by anon (@anon) on CodePen

[Sahil]

It is happening because how from tweens work. When you rebuild your timeline, you are setting timeline's progress to 0. At progress zero your element is at 100% so first tween goes from 100% to 100%.

 

 

Easiest solution would be to use fromTo tweens.

 

See the Pen MXXLPG?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

[Mia+Lily]

Thank you @Sahil, that makes sense now when I see the positions in the log!