Jump to content
Search Community

How to use TweenMax.updateTo to change toVars on the fly

psygnus test
Moderator Tag

Go to solution Solved by psygnus,

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

Hello, everyone!
I would like some help in order to use updateTo function correctly.
I create tweens like this : 

this.tween = TweenMax.fromTo(this.cont2, time/1000, {y:0}, {y:1000, ease:Linear.easeNone, onComplete:on_stop, onCompleteParams:[this.rNum]});

and i would like to be able to stop it during tweening, by setting a new destination y parameter.
So i tried to do it like this : 

this.tween.updateTo({y:500}, false);

but this is changing the object's current y position, and not the final y destination.
So based on the documentation, i am changing the fromVars Object, instead the toVars Object.


My question is, wether i can change the destination position on the fly, and how.


Thanks in adnvance!




I was wrong. The above way to change destination y is correct!

It seems like i have to change manually the duration of the tween also. That's why i was getting the wrong visual effect i was looking for.


So i rephrase my question. Is there a way to tell the tween to stop at the new updated y parameter, regardless of the initial duration? Or do i have to calculate the distance covered, and figure out how much time it should get.


Thanks, and sorry for the misunderstanding...!

Edited by psygnus
Link to comment
Share on other sites

It sounds like you're trying to make it travel at a certain constant velocity and dynamically update the destination value, right? If so, yes, you'd need to do the math and since updateTo() isn't intended to work with plugins (largely due to performance and complexity reasons), I'd suggest creating a new tween although you certainly could invalidate() the old one, repopulate its "vars" and restart() it if you need to maintain that specific reference. I'll assume you're animating a DOM element with CSSPlugin (but the following code could easily be adjusted if you're animating a canvas object or whatever):

var myElement = document.getElementById("yourID"); //the element to tween
function move(element, y, speed) { //"speed" is pixels per second
    if (!element._gsTransform) { //forces GSAP to parse the transforms...only necessary the first time.
        TweenLite.set(element, {y:"+=0"});
    return TweenLite.to(element, Math.abs(y - element._gsTransform.y) / speed, {y:y, ease:Linear.easeNone, onComplete:on_stop, onCompleteParams:[this.rNum]});
//now you can just call this method anytime and it'll adjust things on-the-fly
move(myElement, 1000, 200);

Does that help?

  • Like 2
Link to comment
Share on other sites

Thanks for the feedback. Sorry if i wasn't specific enough, i am actually tweening a canvas object (an easelJS container).

I will try your approach, first thing tommorow (currently AFK).


While i was waiting for feedback i tried to use updateTo by changing destination and calculating a new duration, but the result was not what i imagined.

It worked but it was not smooth enough, like it made the object jump a few pixels abruptly. But it could have been wrong calculations.

Is it weird that it kind of worked?


Anyway i'm really thankful, will post more feedback tommorow.

Link to comment
Share on other sites

Ah, thanks for the additional info. If you're doing canvas animation, it makes it even easier :)

function move(obj, y, speed) { //"speed" is pixels per second
    return TweenLite.to(element, Math.abs(y - obj.y) / speed, {y:y, ease:Linear.easeNone, onComplete:on_stop, onCompleteParams:[this.rNum]});
//now you can just call this method anytime and it'll adjust things on-the-fly
move(yourObject, 1000, 200);

As far as your updateTo() kinda working, it's tough to address blind. I'm not sure exactly how you're handling things or what's happening under the hood. My suggestion would be to use the code above and let us know if it works well for you. 


Happy tweening!

  • Like 2
Link to comment
Share on other sites

Your code works almost perfectly, but i am getting a small but noticeable jump on the object tween when the function is executed.

I am not sure how to address that, but i would like to try this if possible : 

Can i detect somehow the moment the object reaches the new destination y and stop/pause/kill the tween there?


Thanks again for the help, really appreciate it.


Link to comment
Share on other sites

  • Solution



I had to kill the existing tween before creating the new one in order to get a smooth transition.

Of course, that required keeping a reference of the object in order to have something to kill!


The following code, based on your help and using my object oriented approach gives the best results!

function MyObj(params)
	this.obj = somedata; 	//construct canvas object
	this.tween = null; 		//declare tween and set to null on object creation
	//..rest of object constructor...

MyObj.prototype.startTween = function(y, speed) { //"speed" is pixels per second
this.tween = TweenLite.to(this.obj, Math.abs(y - this.obj.y) / speed, {y:y, ease:Linear.easeNone, onComplete:on_stop, onCompleteParams:[this.rNum]});

MyObj.prototype.stopTween = function()
	//Calculate new dest based on some other data
	newdest = some_calculations;
	startTween(newdest, speed);

//create an object
a = new MyObj(few_params);
//start object tween like this
a.startTween(1000, 200);
//stop object tween on whatever event type you need simply calling stopTween()

I am curious to find out what causes that tween jump, if you don't kill the first tween.

My guess is that the re-calculations to change the tween on the fly are expensive enough to break the smooth motion(?)


Anyway, thanks to your insight i got it. Thanks a million!

Link to comment
Share on other sites

Hm, without looking at your code and a demo, it's tough to say exactly why you're seeing a jump but you shouldn't have to kill() th tween manually. Instead, you could set overwrite:true in your vars on the new tween and it'll automatically overwrite/kill other tweens of the same object. And actually, the default of "auto" is only slightly more processor-intensive as it has to analyze each property in the tween and only kill the one(s) that overlap; I can't imagine why you'd notice any difference (JS execution is super fast).


Anyway, I'm glad to hear you got things working well. Happy tweening!

  • Like 1
Link to comment
Share on other sites

  • 7 months later...

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