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

[shenning]

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.

[Diaco]

Hi shenning 

 

pls try this :

$("#restart").on("click", function() {  
  i++;
  newX=(x*i);
  $('#redBox').html(newX);
  Tween.vars.css.x = newX;
  tl.seek(0).invalidate().restart();
});

See the Pen gpKRoE by MAW (@MAW) on CodePen.

[OSUblake]

I know this can be confusing, but the reason it isn't working is because 'x' is a CSSPlugin value. If you look at the documentation, it states that this method will only work for non-plugin values.

[shenning]

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) {
        this.oTweenElement[key].tween.vars.startAt.x=iXFrom;
    }

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

Thanks a lot!

[Carl]

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

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/updateTo/

 

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.

[Lloydie73]

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

[OSUblake]

Did you try Diaco's example up top? He actually has a lot of examples of how to invalidate a tween if you search around the forum.

[Lloydie73]

not sure how that example applies:

 

 

tracerTimeline.vars.css.x = targetX;

tracerTimeline.vars.css.y = targetY;

tracerTimeline.invalidate().restart();

 

where targetX and targetY are already defined? 

[Carl]

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.