Jump to content
Search Community

updateTo() method questions

Raynor 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 wonder why css: {} autowrapping does not work for updateTo function. It seems a little confusing that i can use a simple shorthand syntax within tween properties, but have to print wrapped-in property like {css:{property:value}} inside updateTo function.

And the other question: it seems like adding tweens to the timeline with shorthand syntax like this: 

timeline.to(target, 0, {property: value});

generates TweenLite tweens, that don't have updateTo method. Can I somehow create TweenMax tweens with this syntax at all or do  I always have  to use something like 

timeline.add(new TweenMax(target, 0, {property: value}));

for this purpose?

Link to comment
Share on other sites

Hello Raynor..


What is the property and value you are trying to animate?


Any additional information you can provide can help us see the issue on what specific property you are having trouble with.


Also a codepen example can help us see the code in context on what property you are using.


Here is a video tut by GreenSock on how to create a codepen demo example:




Thanks :)

  • Like 1
Link to comment
Share on other sites

The docs actually say:


updateTo() is only meant for non-plugin values. It's much more complicated to dynamically update values that are being handled inside plugins - that is not what this method is intended to do.



So updating CSS props dynamically like that isn't officially supported. That's not to say it won't ever work, especially if the tween hasn't started yet. 


And yes, the convenience methods of TimelineLite and TimelineMax always insert TweenLite instances instead of TweenMax (unless you specify a TweenMax-only property like "repeat") because:

  1. TweenLite is very slightly faster because there's no logic in the main render loop that has to accommodate repeats/yoyos. In other words, it's a performance optimization.
  2. We were trying to minimize dependencies. We wanted you to be able to use just TweenLite and TimelineLite if you wanted, and still get a TON of functionality. If we made those convenience methods insert TweenMax instances, it's a bigger dependency. 

And as you discovered, updateTo() is a TweenMax-specific method. You can, of course, insert TweenMax instances yourself if you prefer, using the add() method. 


Does that answer your question(s)? 

  • Like 1
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...