Jump to content


Repeat animation infinitely with a TimelineMax including a pause

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

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 })


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 by neeh
typo + grammar
Link to comment
Share on other sites

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.


  • Like 6
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

  • 1 year later...

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 })



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

Link to comment
Share on other sites

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




  • Like 1
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.