Jump to content
Search Community

.updateTo() has no effect on TimelineMax.restart()

shenning test
Moderator Tag

Go to solution Solved by shenning,

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

Basically I have a TimelineMax that is populated by some TweenMax.

TimelineMax might be triggered multiple times by TimelineMax.restart().

On event window.resize() some vars of TweenMax are updated by TweenMax.updateTo().


All works fine when TimelineMax has not been started.

But updateTo() seems to not alter given vars after TimelineMax has been started the first time.


Have a look here:

I) Initial x position is set to 700.

II) X position is set to 100 before first restart().

III) This new property is set perfect.

IV) All following updateTo() have no effect anymore


Did I implement something wrong?


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

Link to comment
Share on other sites

  • Solution

I didnt get the point with CSS Plugin due to given example on documentation handles straight the x-position.

Nevertheless I got it to work by manipulating the attributes of the vars object.


I changed the tweening method from to() to fromTo() In order to be able to adapt the starting values as well.


Finally I ended up in the following code

for(var key in this.oTweenElement) {
    //I) set FROM if given
    if(this.oTweenElement[key].tween.vars.startAt!==undefined) {

    //II) set TO dependend of status
    if(true===this.oTweenElement[key].tween._initted) {
    } else {

Thanks a lot!

Link to comment
Share on other sites

The example in the updateTo() docs states that x is a property of a generic JS object, not a DOM element.



Please note that the object has other tweenable properties ilke age and weight too.


Are you referring to an example somewhere else on the site? Please let us know so we can fix it or make it more clear. 



Please keep in mind that GSAP can animate any numeric property of any JS object, it is not meant only for CSS values.

For instance when animating objects using <canvas> or canvas libraries like EaselJS a property like x has no correlation to CSS transforms.

  • Like 1
Link to comment
Share on other sites

  • 8 months later...

.updateTo() doesnt work for plugin values like x and y: ok. if I have a Tween:


var tracerTargetValues = {x:350, y:75, ease:Power1.easeInOut, yoyo:true, repeat:2};
tracerTimeline.add( TweenMax.fromTo('#tracer', 10, {x:-50, y:100}, tracerTargetValues));
and when an event happens, I want to pause that tween where it is, and change the destination values to targetX and targetY which are predefined variables.
how do I do that? 
Link to comment
Share on other sites

Hi Lloydie73,


It would really help if you could provide a CodePen demo so we can see exactly what you are trying to do.

From the code you have shown it appears you are trying to change css vars on a timeline but only tweens have css vars. 



invalidate() isn't really intended to dynamically change destination values on the fly


Jack gave a great explanation of invalidate() here: http://greensock.com/forums/topic/13987-invalidate/?p=59036


You might be better off killing() the tween in the timeline and inserting a new one. Again, its tough to visualize what you need to do or test our theories without a reduced test case.

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