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

[Fakebook]

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

[PointC]

Hi Fakebook  ,

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

 

More reading about TimelineMax:

http://greensock.com/docs/#/HTML5/Animation/TimelineMax/

 

Check out Carl's position parameter demos too: 

http://greensock.com/position-parameter

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


tl.from(".left", 2, {
  left: 200,
  opacity: 0
})
.from(".right", 2, {
  bottom: 200,
  opacity: 0
},"+=2");

I hope this helps. Happy tweening.