Jump to content



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



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 comment
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})



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 

  • Like 3
Link to comment
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?



var myTween = TweenLite.to .....

onComplete = myTween.invalidate();
Link to comment
Share on other sites


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.