Jump to content


Completing one animation at a time, with a pause, then looping

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

I'm fairly new to GSAP, so I'm struggling with how to complete a certain task.


I'm trying to do the following:


Complete the animations for the first box > Pause for 2s > Fade out elements > complete animations for second box > Pause for 2 > Fade out >.... after all boxes do their animation separately, I would like to have another delay before the entire process repeats itself.


I wasn't sure if using methods like StaggerFromTo or Each would help / how to implement with GSAP.  Any info on where to start would be greatly appreciated.

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

Link to comment
Share on other sites

Hi Fakebook  :),

If you use TimelineMax instead of TimelineLite, you can use the repeat and repeatDelay shown below.


More reading about TimelineMax:



Check out Carl's position parameter demos too: 


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

tl.from(".left", 2, {
  left: 200,
  opacity: 0
.from(".right", 2, {
  bottom: 200,
  opacity: 0

I hope this helps. Happy tweening. :)

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