Nested timeline repeat -1 with tweenTo not working (bug?)

[Coalition Tech]

I'm building a multistep form which has animations playing for each step you take (with the ability for it to reverse the animation too). At the very last step, I need to trigger an infinite loop timeline to play, however it only seems to play once. I can make it work by using onComplete or call to play/pause the infinite loop TL but the animation is not smooth.

 

Is there a way for the TL to loop infinitely and onReverse for it to complete the rotation only once in the direction that is closest to where it started?

See the Pen OJvZjgx by Envyme1 (@Envyme1) on CodePen

[GreenSock]

I'm concerned that you may not understand what this does: 

.add( rotateTl.play(), 2 )

That play() function returns the rotateTl itself (for chaining), so you are literally INSERTING that infinitely-repeating timeline into the mainTl with that add() call. 

 

Also, you've got a tween in the mainTl that's animating the b2.rotation and you've ALSO got a totally separate timeline that's animating the exact same property of the same element. When a tween renders for the first time, it records the start/end values for fast interpolation, so be careful - if you run that rotateTl first, it'll start at a rotation of 0...and then if you play the other one, it'll animate it to 45...so then if you restart rotateTl, it'll jump to 0 of course. You can invalidate() any tween/timeline to flush recorded start/end values and force it to re-initialize on the next render. 

 

In order to do what I think you're trying to do, you'd need to track when you're reversing things and then use conditional logic like this: 

See the Pen xxWjpJG?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I hope that helps. 

[Coalition Tech]

@GreenSock thank you so much for your help! That makes a lot of sense, I really appreciate it. I was able to get my animation to work as I was looking to make it with this info.