Infinitly repeating tween stops timeline

[tpav]

How would I keep the blue box spinning while allowing what comes afterward to animate? I guess it's logical for the timeline to wait for the blue box but it's never going to finish! I thought the answer was a separate timeline for the blue box, then using .add() but same result.

See the Pen qbLGMX by anon (@anon) on CodePen

[PointC]

Hi tpav 

 

Welcome to the forums.

 

I'd probably just put that infinite tween into a function and call it after the red box animates. I made a fork of your pen with that solution:

See the Pen KVbjKd by PointC (@PointC) on CodePen

 

I wasn't sure if the green rotation was supposed to wait for the first revolution of the blue square or not so I put in a 1 second delay for the green square rotation.

 

Hopefully that helps a bit.

 

Happy tweening.

[tpav]

Thanks! That will set me on the right path.

[Friebel]

Hello tpav,

 

You could also add a starttime/timeoffset after the tweens, like so:

tl.to(".red", 1, {rotation:360}, 0)
  .to(".blue", 1, {rotation:360, repeat:-1},  1)
  .to(".green", 1, {rotation:360},  2)
;

Or by using timeline position-labels:

tl.to(".red", 1, {rotation:360}, 'START')
  .to(".blue", 1, {rotation:360, repeat:-1}, 'START+=1')
  .to(".green", 1, {rotation:360}, 'START+=2')
;

See codepen example:

 

See the Pen VeRKKO by maarten77 (@maarten77) on CodePen

[Carl]

Yup, infinitely repeating animations definitely make it difficult to add things relative to the end of the timeline. All great suggestions so far. 

 

There are 2 methods of TimelineLite() that can be used together to bypass the need for labels, hard-coded offsets, function calls etc. in this scenario.

 

recent() : Returns the most recently added child tween/timeline/callback regardless of its position in the timeline.

endTime() : Returns the time at which the animation will finish according to the parent timeline's local time. 

 

tl.to(".red", 1, {rotation:360})
  .to(".blue", 1, {rotation:360, repeat:-1})
  // add next tween as soon as 1 iteration of previous animation ends
  .to(".green", 1, {rotation:360}, tl.recent().endTime(false));

http://codepen.io/GreenSock/pen/vLPxLq?editors=0010

 

 

[Jonathan]

Thanks Carl for sharing about those 2 unsung heroes of GSAP .. recent() and endTime()

[PointC]

Very nice Carl - I like that.

 

I don't often use infinitely repeating tweens on a timeline, but when I do, that method could be quite handy.

 

It always amazes me how much thought, care and detailed effort has gone into this platform. So cool.

[Friebel]

There are 2 methods of TimelineLite() that can be used together to bypass the need for labels, hard-coded offsets, function calls etc. in this scenario.

...

 

From now on I only wear green socks!!

[Carl]

oh, forgot to tell you guys. 

As of 1.20.0 if you add a tween to a timeline immediately after a repeating tween the new tween will go directly after the first iteration of the repeating tween.

https://github.com/greensock/GreenSock-JS/commit/fb5cede26aa0a6463f2faac755d09579750c9e7a

var tl = new TimelineMax();

tl.to(".red", 1, {rotation:360})
  .to(".blue", 1, {rotation:360, repeat:-1})
  // add next tween as soon as 1 iteration of previous animation ends
  .to(".green", 1, {rotation:360});

 

See demo below where you don't need end() and recent() for this

 

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

 

[PointC]

wait.... what??

 

Sheesh... how did I miss that little ninja nugget? That's pretty neat.