.invalidate()

[BradLee]

I'm trying to reset a tween with .invalidate() however when I attempt to use it, after the initial animation, it triggers my 'onComplete' function infinitely and eventually locks up my browser. The docs don't give any examples of how to use this function (http://greensock.com/docs/#/HTML5/GSAP/TweenMax/invalidate/) and other forum posts link to codepens that don't work. My code - 

 

var myTween = TweenMax.to(icon, time, {
                rotation: `60`,
                transformOrigin: "50% 50%",
                ease: ease,
                onComplete: function(){
                    console.log('complete');
                    myTween.invalidate();
                }
            });

 

[Carl]

Hi and welcome to the GreenSock forums,

 

I'm not sure if it's a bug or just undesired behavior.

We will investigate further. In the meantime, setting the progress(0) before invalidating seems to help

 

var myTween = TweenMax.to(".icon", 1, {
  x: 60,
  transformOrigin: "50% 50%",
  onComplete: function() {
    console.log('complete');
    myTween.progress(0).invalidate(); 
  }
});

 

http://codepen.io/anon/pen/eZgKaR?editors=0011

 

Otherwise it appears that after the invalidation the playhead remains at the end and keeps firing the onComplete.

[BradLee]

In your codepen example, the problem still exists and also the animation plays over and over again.

 

I can reset my tween by creating a new tween within the complete function, using .set() and individually changing the values of each attribute back to original values. This seems a lot of work just to reset a tween (it does not work if I try and use .set() on the original tween). Code below - 

 

            let myTween = TweenMax.to(icon, time, {
                rotation: `60`,
                transformOrigin: "50% 50%",
                ease: ease,
                onComplete: function(){
                    TweenLite.set(icon, {rotation: `0`, transformOrigin: `50% 50%`})
//                    myTween.set(icon, {rotation: `0`, transformOrigin: `50% 50%`})
                }
            });

[Carl]

The problem you reported was that the onComplete fired continuously after invalidating and crashed the browser. 

The pen I provided showed that the pen would properly run again.Perhaps you thought the problem with my pen was that the tween played again? If that is the case you could just pause the tween after invalidating it.

 

My guess is that you are using invalidate() for the wrong reasons. invalidate() is not meant to reset a tween its meant to allow new values to be recorded the next time it runs. 

 

If your goal is to simply bring icon back to its "pre-tweened", normal state you can do either of the following in your onComplete:

 

1. drive the playhead back to the beginning with tween.pause(0);  http://codepen.io/GreenSock/pen/pyRZPr?editors=0011
2. use TweenLite.set(icon, {clearProps:"all"}); http://codepen.io/GreenSock/pen/vGgaxo?editors=0011

[GreenSock]

As far as I can tell, this is all expected behavior and I bet Carl is correct in the assumption that perhaps you misunderstood what invalidate() does. Let me explain...

 

When a tween renders for the first time, it records all the pertinent values (typically the starting values for to() tweens). So let's say you're animating an element to x:100. The first time it renders, it says "okay, what is 'x' right now....let's lock that in as the starting value so that we can interpolate between that and 100 over the course of the tween". The purpose of invalidate() is to simply flush those values out and make the tween act like it never rendered yet, thus on the very next render it'll re-initialize itself and record those values. That does NOT mean that it will change its position in its parent timeline (its startTime). For example, if it's halfway done when you invalidate(), it will pick right up from there on the next render. 

 

So if your tween just finished and you invalidate(), you're telling it to act like it has never rendered and thus it must re-initialize on the next render in which case it'll say "Oh! The playhead has passed beyond the end of me...I am complete and should call my onComplete now."

 

Does that clear things up? 

 

If your goal is to return the values to their beginning states, it should be as simple as myTween.pause(0) or if you don't need the tween anymore, you can just myTween.pause(0).kill(); That effectively rewinds it and discards it. 

[BradLee]

Spot on, thanks for that!