Jump to content
GreenSock

tpav

Infinitly repeating tween stops timeline

Go to solution Solved by PointC,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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.

:)

  • Like 3
Link to comment
Share on other sites

Thanks! That will set me on the right path.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

 

 

  • Like 5
Link to comment
Share on other sites

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. 8-)

Link to comment
Share on other sites

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!!

Link to comment
Share on other sites

  • 2 years later...

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

 

  • Like 5
Link to comment
Share on other sites

wait.... what??

 

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

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×