Jump to content


Update tween value while its tweening?

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

Hey guys,


Been wondering how to do this for quite some time now....


say I have a tween like


tl.to($box, 1, {x:$(window).width()});


Now, xPercent aside... I am wondering how I could update this tweens "x" target while its running... in case someone had resized the window.


I assume I could run an onUpdate method to update the tweens value?



Link to comment
Share on other sites

The short answer: xPercent is the best way to accomplish that sort of thing. 


The longer answer: 

It's a lot more complex than you might expect because imagine a width tween that's going from 0 to 100 over the course of 10 seconds linearly (this makes it pretty easy to visualize). So that's 10 pixels per second. Great. Now let's say when the tween is 20% complete (width:20), you suddenly want to change the end value to 200 instead of 100. It's quite simple to do internally (swap one value), but when it renders, you'll see a jump from 20 to 40 instantly because the tween's duration didn't change, and its progress was 0.2 (20%). In other words, 20% progress used to be 20 in the old tween, but it's 40 with the updated value. 


I assume you want things to be perfectly smooth (no jump from 20 to 40). The only way to accomplish that in the context of a tween is to adjust the starting value (in this case, make the starting width -25), but that means that if you reverse() or restart(), things will look pretty weird :)


So it's not a bug or problem with GSAP - it's just a logical impossibility. 


And actually, the xPercent thing would work the same way anyway - it'd jump, but since the user is dragging the window gradually, the jumps aren't so noticeable. 


All that being said, one other solution would be to do something like:

var time = tween.time();
tween.vars.width = 200; //your new width;

That basically forces the tween back to its starting position, invalidates it so that on the next render it will re-parse the starting/ending values, and jumps back to the correct time in the tween. 


Also for the record, TweenMax has an updateTo() method that will adjust the starting values as I described above, but it doesn't work with plugins (including CSSPlugin) for some even more complex reasons, so it's not a viable solution here. 

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