Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Torben

Can't get updateTo to work

Recommended Posts

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

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

  • 4 weeks later...

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

Link to comment
Share on other sites

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);
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.
×