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

Eureka!

 

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()
{	
	this.tween.kill();
	//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()
a.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!

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

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.

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

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.

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

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!

 

EDIT : 

 

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