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.
http://codepen.io/misterjworth/pen/bdjoLv
(The actual project uses multiple tweens within a TimelineMax object that all reference the same variables)