Repeat stagger animation but begin repeat on 2nd box

[jeansandjacktrequired]

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.

[GreenSock]

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

 

http://codepen.io/anon/pen/ZOeNbe?editors=1010

 

[jeansandjacktrequired]

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.

[Carl]

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

 

http://codepen.io/GreenSock/pen/oLWvNy/

[jeansandjacktrequired]

thanks!