Jump to content
GreenSock

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

invalidate()

Recommended Posts

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

Link to post
Share on other sites

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) 
  • Like 3
Link to post
Share on other sites

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();
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.

×