jeansandjacktrequired

Repeat stagger animation but begin repeat on 2nd box

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

http://codepen.io/jeansandjacketrequired/pen/rLyRgB

 

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

 

Share this post


Link to post
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 :)

 

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

 

  • Like 1

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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.