Invalidating a Tween and changing its properties

[Suresh 3 Likes (Newbie)]

I'm trying to understand how a tween's invalidate() function works. According to the docs, if you invalidate() and restart() a tween, the timeline will take the new parameters of the tween, right?

 

I tried to build a simple example to understand this behavior, but what ends up happening is really confusing. Here's what I have. (I'm using KineticJS)

var t1 = new TimelineMax({paused:true, onUpdate:stageUpdate, onUpdateScope:stage});

var tweenX = TweenMax.fromTo(rect, 1, {setX:100}, {setX:500});

var tweenY = TweenMax.fromTo(rect, 1, {setY:100}, {setY:0});


t1.add(tweenX,0);

t1.add(tweenY,1);

When I add these tweens to the timeline, they work as expected.

 

Now, I have a function where I'm trying to update the way tweenY works. So, I update the parameters, invalidate the tween and the timeline and restart the timeline. 

function updateTween() {

    tweenY.invalidate();

    tweenY = TweenMax.fromTo(rect, 1, {setY:100}, {setY:200});

    t1.seek(0).invalidate();

    t1.restart();

} 

However, the behavior is really confusing.

Original behavior: 'rect' moves right to x:500, then moves up to y:0.

After updating the tween, what I thought would happen: 'rect' moves right to x:500, then moves down to y:200.

What actually happens: 'rect' moves diagonally to x:500, y:200, then moves up to y:0

 

I built a codepen to show this:

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

 

Can someone help me understand this please?

[Carl 9,755 Likes (Superhero)]

Hi, and thanks so much for the codepen example. Invalidate can be a tricky concept.

 

invalidate() clears start values so that the engine can record new start values based on the objects current properties the next time the tween runs. It isn't used a mechanism for you to then provide new values.

 

Also when you used:

 

tweenY = TweenMax.fromTo(rect, 1, {setY:100}, {setY:200});

 

That is not how you update values in an existing tween, that actually creates a new tween for you.

 

The way you want to approach this is simply to 

 

kill() the tween

create a new one

add it back into the timeline as shown here

 

http://codepen.io/GreenSock/pen/GyBDu

[Suresh 3 Likes (Newbie)]

Hmm.. I think I'm beginning to understand. I'll try to wrap my head around that invalidate() bit, but thanks for the modified codepen. That solves it! I somehow imagined that the GSAP timeline would be tracking my local JS variable, but now that I think about it... yeah, architecturally that makes no sense at all

 

Is there any difference between doing kill() and remove()? Any reason you choose to use kill() instead of remove() in this case?

 

BTW, you guys are awesome. Such quick and specific help! Keep rocking!

[Carl 9,755 Likes (Superhero)]

remove() will take the tween out of a timeline but it is still fully in tact and can still be played on its own or even placed in another timeline. kill() on the other hand clears out all the data (starting / ending values), removes callbacks and basically cleans everything up so that the tween is eligible for garbage collection. 

[Suresh 3 Likes (Newbie)]

Ah ok, I get it now. Thanks Carl!