Can't get updateTo to work

[Torben 0 Likes (Newbie)]

Look at this:

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

 

Why doesn't the box go back to 0?

 

 

 

And while we'er at it - why does the box insist on going to 550px here:

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

[Carl 9,066 Likes (Superhero)]

I can see how that seems a little odd, but this is addressed in the updateTo() docs, but to summarize:

 

1: updateTo() is not intended to work with plugins. In your case TweenMax is using the CSSPlugin (behind the scenes) to animate CSS properties of DOM elements.

 

2: when you call updateTo(), in order to maintain a smooth tween with no jumping, the startTime() of the tween must be shifted. As such it is advised that you not use updateTo() if you plan on reversing the tween.

 

http://api.greensock.com/js/com/greensock/TweenMax.html

 

Currently, the bigger issue is that updateTo() wasn't intended to work with CSSPlugin.

[Torben 0 Likes (Newbie)]

Thanks Carl

[OSUblake 9,990 Likes (Superhero)]

I just started using GSAP and really love it, but trying to get the `updateTo` method to work had me stumped for several hours.

 

The documentation is VERY misleading. I read the part about it not working for plugin values, but then the example shows CSS values with comments describing those values.

 

This makes it seem like it does work with the CSSPlugin: 

//create the tween 
var tween = new TweenMax(mc, 2, {x:100, y:200, opacity:0.5});
//then later, update the destination x and y values, restarting the tween 
tween.updateTo({x:300, y:0}, true);
//or to update the values mid-tween without restarting, do this:
tween.updateTo({x:300, y:0}, false);

Can the documentation be updated with another example so other people don't assume the same thing?

 

Thanks

[Carl 9,066 Likes (Superhero)]

Fair point, OSUBlake.

 

Sorry for the confusion.

 

I've updated the docs to make it more clear that those are css properties of a DOM element

 

//a generic JavaScript object (not a DOM element)
var obj = {x:0, y:0, age:18, weight:180}


//create a tween that modifies properties of obj
var tween = new TweenMax(obj, 2, {x:100, y:200, age:40, weight:250});
//then later, update the destination x and y values, restarting the tween 
tween.updateTo({x:300, y:0}, true);
//or to update the values mid-tween without restarting, do this:
tween.updateTo({x:300, y:0}, false);