Repeat animation infinitely with a TimelineMax including a pause

[neeh 1 Likes (Newbie)]

Hi there,

 

I'm trying to make an animation to repeat infinitely with a TimelineMax instance that includes a pause.

 

var tl = new TimelineMax({ repeat: -1 })
  .to(repeatWithPause, 0.5, { rotation: 180 })
  .to(repeatWithPause, 0.5, { rotation: 0 })
  .addPause(1.0);

 

You can see in the codepen what I've tried so far. It seems I'm able to repeat several times the first animation. But as soon as I add a pause in the timeline, only the first iteration is played. The same applies for repeat > 1 and when the addPause() isn't at the end of the timeline.

 

I might be doing something wrong.

 

Any help appreciated.

See the Pen qXVXLY by hekat (@hekat) on CodePen

Edited August 15, 2017 by neeh
typo + grammar

[PointC 14,170 Likes (Superhero)]

Hi @neeh

 

Welcome to the forum.

 

If you'd like to infinitely repeat a timeline, but have a pause between repeats, you just need to add a repeatDelay. Like this:

 

var tl = new TimelineMax({ repeat: -1, repeatDelay: 1 })

 

Hopefully that helps. Happy tweening.

[neeh 1 Likes (Newbie)]

Thank you Craig for this quick answer!

 

It works!

 

Strangely, the code I had use to work on a project using 1.19.1. The problem appeared as I updated to 1.20.2

 

Thanks again

[hitesh sahu 0 Likes (Newbie)]

Using new Documentation https://greensock.com/docs/TimelineMax/repeat()

 

 <div id="rect"></div>
 



 var tl2 = new TimelineMax({ repeat: 10 })
  .to("#rect", 0.5, { rotation: -10, transformOrigin:"left top" })
  .to("#rect", 0.5, { rotation: 10 })
  .repeat(-1);

 

 

See the Pen LoBWgv?editors=1010 by hiteshsahu (@hiteshsahu) on CodePen

[mikel 4,774 Likes (Superhero)]

Hi @hitesh sahu

 

Welcome to the GreenSock Forum.

 

What´s your question?

If you start with repeating indefinitely, using -1,

you could change this later to 3 times.

 

See the Pen RmBMYY by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel