Updating tween variables

[misterjworth]

I'm trying to get an animation to use different property values every time it plays.

I've put the values into variables and everything works fine using the default values the first time, but I can't figure out how to get the animation to read the new values that are created when you click a button.

var jumpHeight = 100;
var jumpTime = 1;
var boxcolor = "#00ff00";

var jumpBox = new TweenMax("#redbox", jumpTime, {y:(-jumpHeight), backgroundColor:boxcolor, ease: Power1.easeOut, repeat:1, yoyo:true});

//called when you click a button
function rePlay(){
  jumpHeight = jumpHeight+24;
  jumpTime = jumpTime-0.1;
  boxcolor = "#0000ff";
  jumpBox.restart();
}

Is there a simple way to do this that I'm missing?

This codePen shows a simplified version of what I'm trying to do.

(The actual project uses multiple tweens within a TimelineMax object that all reference the same variables)

 

See the Pen bdjoLv by misterjworth (@misterjworth) on CodePen

[Diaco]

Hi misterjworth 

 

pls check this out : 

See the Pen xGJpPa by MAW (@MAW) on CodePen

[Rodrigo]

Hi and welcome to the GreenSock forums.

 

The reason why you can't pass new values to an existing GSAP instance is because once the Tween/Timeline is created it doesn't read new information you provide, specially for plugin values, such as any CSS property of a DOM element. This is by design to avoid constant read/write operations and keep things super fast.

 

As Diaco points one solution is to create the instance again and restart it. Another choice is the answer by Blake in the following thread, in case you need to update your instances on the fly:

 

http://greensock.com/forums/topic/11971-changing-target-values-of-tween-in-progress/

 

Let us know if you need something else.

 

Happy Tweening!!

[misterjworth]

Thanks for the help!

I'm gonna give Diaco's solution a try.