[onReverseComplete not working on nested loops]

Thanks Carl! Glad it was just something simple amidst all the other complexity. I really appreciate you taking the time to comb through it.

[onReverseComplete not working on nested loops]

Hey!

I'm working on a time visualizer that uses a set of rings to indicate different time increments. There's still a lot of work to do, but I hit a snag I can't figure out. 

If you look at the codepen, you'll see the animation is looping pretty well in the forward direction (just a small glitch) but if you click anywhere, the animation will reverse, then eventually stop. I can't figure out how to keep it going.

As suggested in other threads, I'm using the onReverseComplete to restart the animation, but the function never gets called. I also changed my 0 second animations to 0.0001 seconds with no luck.

Any insights would be greatly appreciated.

Thanks!

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

[Why won't the last coin flip??]

Wow! Thanks so much for taking the time to help.  I had a feeling I was taking the long way around the problem. I'll spend some time studying what you did there. What a great lesson!

[Why won't the last coin flip??]

I'm trying to create an interactive illustration that requires a bunch of coins to be flipped when a button is clicked. I managed to hack together something that works and builds a new timeline every click, but I can't figure out why the very last coin in the series won't animate. I'm new to GSAP and a javascript novice, so it could easily be something very simple. Any insights would be appreciated.

 

 

See the Pen EjGrGL?editors=001 by misterjworth (@misterjworth) on CodePen

[Updating tween variables]

Thanks for the help!

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

[Updating tween variables]

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