Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Repeat stagger animation but begin repeat on 2nd box

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


Here is what I want to learn today.

I have a simple fade in/fade out animation of several boxes. I want to repeat the animation but this is how I want to do it:

box 1, box 2, box 3, box4, box 5 - hold box 5 on the stage for a second then repeat box 2, box 3, box4, box 5 - hold box 5 on the stage forever.



here is my code pen


I think I may be looking into implementing nested timelines - correct?
something like this?

tl.add( firstPart() )
  .add( secondPart(), "-=0.5") //overlap 0.5 seconds

- - - -

Edit:  OK. This is how I think I should build this simple animation.

Timeline1  repeat 2

Box 1
Box 2
Box 3

Timeline 2 (or nested timeline) no repeat

Box 1
Box 2
Box 3

Box 1 and hold


See the Pen rLyRgB by jeansandjacketrequired (@jeansandjacketrequired) on CodePen

Link to comment
Share on other sites

There are a LOT of ways to do this. If you want concise code, you could probably do it with staggers kinda like:

var tl = new TimelineMax();
tl.staggerTo(".box", 1, {x:400},3);
tl.staggerTo(".box", 1, {x:800, autoAlpha:0},3,2);
tl.addLabel("round2", "+=1");
tl.staggerFromTo("#box2, #box3, #box4, #box5", 1, {autoAlpha:1, x:0}, {x:400}, 3, "round2");
tl.staggerTo("#box2, #box3, #box4", 1, {x:800, autoAlpha:0}, 3, "round2+=2");

But I tend to like to build things in ways that are conceptually clearer. For example, you could have a couple of helper functions that spit back timeline instances and then build your master timeline with those: 

function animateBox(element, linger) {
  var tl = new TimelineLite();
  tl.fromTo(element, 1, {x:0, autoAlpha:1}, {x:400});
  if (linger != Infinity) {
    tl.to(element, 1, {x:800, autoAlpha:0, delay:linger});
  return tl;
function animateBoxes(boxes, linger, overlap) {
  var tl = new TimelineLite();
  boxes = document.querySelectorAll(boxes);
  for (var i = 0; i < boxes.length; i++) {
    tl.add(animateBox(boxes[i], linger), "-=" + overlap);
  return tl;

var tl = new TimelineMax(),
    linger = 1,
    overlap = 0;
tl.add(animateBoxes("#box1, #box2, #box3, #box4", linger, overlap))
  .add(animateBox("#box5", linger + 1), "-=" + overlap)
  .add(animateBoxes("#box2, #box3, #box4", linger, overlap))
  .add(animateBox("#box5", Infinity), "-=" + overlap);

Hopefully that gets you going in the right direction :)




  • Like 1
Link to comment
Share on other sites

Fantastic!  I am working up one way myself - going through a timeline tutorial right now. I'll include my codePen today or tomorrow if you would like to review.


I'll implement your way as well.

  • Like 1
Link to comment
Share on other sites

Just to add another one of those "LOTS of ways" you could put some labels in your timeline and then use TimelineMax's tweenFromTo() to tween between those 2 labels on your second repeat (from box2 to box 5) 


var tl = new TimelineMax({onComplete:again})

tl.staggerFrom(".box", 0.5, {autoAlpha:0, x:-400}, 2)
  .staggerTo(".box", 0.5, {autoAlpha:0, x:400}, 2, 1.5)
//place some labels to mark where box 2 starts and box 5 ends
tl.add("startBox2", 2)
tl.add("endBox5", tl.duration() -0.5)

function again() {
  tl.tweenFromTo("startBox2", "endBox5")
  • Like 4
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.