Jump to content
Search Community

Can't get updateTo to work

Torben test
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

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