Jump to content


Invalidating a Tween and changing its properties

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'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});


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 = TweenMax.fromTo(rect, 1, {setY:100}, {setY:200});

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?

Link to comment
Share on other sites

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



  • Like 1
Link to comment
Share on other sites

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 :D


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!

Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

Ah ok, I get it now. Thanks Carl! 

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.