Relative value tweening

[rabidflash]

Hi,

I'm trying to do a simple tweening of width, increasing it by a value of 120px and I'm trying to repeat this:

 

TweenMax.to($(".class1"), 1, {css:{width:"+=120px"},repeat:-1});

 

 

the problem is the animation animates always from the original width instead of the updated width. How can I make it to repeat the value go from 0-120,120-240...

 

thanks.

[Carl]

Hi RabidFlash,

 

Welcome to the forums and js version of GSAP12!

 

Yes, when a tween is set to repeat it plays the same animation over and over.

In order to that the starting values of all the properties that are being tweened are internally recorded and re-used each time the tween plays.

 

For your situation, you need to have fresh starting values each time the tween repeats (to use the current width as the new starting width). To do that you can use the invalidate() method like so:

 

 

var tween = TweenLite.to(logo, 1, {css:{width:'+=40px'}, onComplete:invalidateMe});
  function invalidateMe(){
 console.log('invalidateMe');
 tween.invalidate();
 tween.restart();
 }

 

live running fiddle: http://jsfiddle.net/h5JBS/1/

[rabidflash]

thanks for the reply. I thought of using the oncomplete event too. But, just wanted to know if there was any other way or if there's something that I was missing..