A timeline for each element in sequence

[ochalmers]

Hi all,

 

In my codepen attached I have each box randomly positioned, and then I am running a timeline that staggers through from opacity 0, then a left or right movement, then goes to opacity 0 again. At the moment this is staggering through, but what I want is for each box to run as their own timeline and in sequence. So I want the first one to fade in from 0, move it's "cover", then fade out to 0. Then the next one would do that same animation. I attempted to use an each function but couldn't seem to get it to work right. Any solutions?

Thanks,

Oliver

See the Pen mEKbvJ by olichalmers (@olichalmers) on CodePen

[Rodrigo]

Hi Oliver,

 

I see two alternatives.

 

One is to create the timelines using the loop and adding a delay on the first instance of each timeline to create the stagger effect:

var els = $(".element"),
    stagTime = 0.5;

els.each(function(i,e){
  var tl = new TimelineLite();

  tl.to({}, (stagTime*i), {})
  // then the animation
});

The other option is to create the timelines and push them to an array. Then add them to a master timeline using the add method with the stagger parameter:

var els = $(".element"),
    master = new TimelineLite();
    stagTime = 0.5,
    tlArray = [];

els.each(function(i,e){
  var tl = new TimelineLite();

  // animation code here

  // finally to the array
  tlArray.push(tl);
});

master.add(tlArray, 0, "normal", stagTime);

http://greensock.com/docs/#/HTML5/GSAP/Core/SimpleTimeline/add/

[GreenSock]

If I understand your goal correctly, all you need to do is alter the stagger and use the position parameter...

 

The stagger would be 1.5 because that's how long it takes for each of your 3-step animations to finish (3 x 0.5)

 

The position parameter just tells it where to start putting them into the timeline. So the first stagger would start at 0 of course, the second batch would start at 0.5 (because that's when the first tween would be done), and the final position parameter would be 1 (because that's when the first 2 tweens would be done). 

tl.staggerFromTo(".box", 0.5, {opacity: 0}, {opacity: 1}, 1.5) 
  .staggerTo(".box .cover", 0.5, {
    cycle: {
      xPercent: [-101, 101]
    }
  }, 1.5, 0.5) 
  .staggerTo(".box", 0.5, {opacity: 0}, 1.5, 1);

Is that what you were looking for? 

 

Rodrigo's solutions are all totally valid too of course. 

[ochalmers]

Thank you both so much for your awesome replies.

 

Jack - I can't believe it was that simple as this has nailed what I was trying to do. Rodrigo I managed to get your second one to work well too!

Thanks guys.