invalidate()

[BradLee 5 Likes (Newbie)]

Can anyone see why this isn't working?
I push a button to translate a div to the right, then invalidate the tween and reset the translation to 0 via div's style property. My assumption is that doing these 2 things should reset the div's transform. However, when I run the tween again it doesn't act properly (the div jumps instead of animating).
 

<button>push</button>

<div></div>

div {
  width: 100px;
  height: 100px;
  background: tomato;

  display: inline-block;
}


let div = document.querySelector(`div`);
 
let btn = document.querySelector(`button`);
 
const move = () => {
  const onComplete = () => {
    div.style.transform = `translateX(0)`;
  };
 
  TweenLite.to(div, 1, {x: 100, onComplete}).invalidate();
};
 
btn.addEventListener(`click`, () => move());

See the Pen KMgzyr by BradLee (@BradLee) on CodePen

[Carl 9,066 Likes (Superhero)]

Thanks for the demo.

 

invalidate() is a little tricky. I can see why you tried to use it here. A few things to keep in mind

 

• invalidate() only clears the recorded values of a tween, it does not remove or reset any values on the properties of the object that was tweened.
• It is only useful to use invalidate() in situations where you are re-playing or re-using the same tween. In your example you are creating new tweens on every click
• chaining an invalidate() call onto a tween does not make it invalidate after it is done playing 
• when you tween the "x" property of a DOM element you are not tweening the transform:translateX() value. GSAP uses a matrix() or matrix3d() for best performance. The Getting Started video illustrates this: http://greensock.com/get-started-js 

 

If I understand correctly there are a few ways to get the desired results.

 

1: Use clearProps:"x"  

 

const move = () => {
const onComplete = () => {
TweenLite.set(div, {clearProps:"x"})
};


TweenLite.to(div, 1, {x: 100, onComplete})
};

http://codepen.io/GreenSock/pen/BzLzmE?editors=0010

 

2: Depending on whether or not the values need to be removed or you just need to return the object to its "pre-tweened state" you can create a tween once that is paused

var moveTween = TweenLite.to(div, 1, {x: 100, paused:true, onComplete})

when you need to "reset" the values just use 

moveTween.pause(0) 

[BradLee 5 Likes (Newbie)]

thanks mate, big help..

 

Just for future reference, to use invalidate property, would I need to save the tween to a variable then call 'invalidate()' on that variable when the tween completed?

 

Like:

var myTween = TweenLite.to .....

onComplete = myTween.invalidate();

[Carl 9,066 Likes (Superhero)]

Yup!