Jump to content
GreenSock

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

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

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 post
Share on other sites

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

  • Like 1
Link to post
Share on other sites

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.

  • Like 2
Link to post
Share on other sites

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!

Link to post
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.

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.

  • Like 1
Link to post
Share on other sites

.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 post
Share on other sites

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.

  • Like 1
Link to post
Share on other sites

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? 
Link to post
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 post
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.

×