Jump to content


Rebuilding the very same timeline causes it to play differently

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

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

Link to comment
Share on other sites

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


  • Like 4
Link to comment
Share on other sites

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



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