Staggering Timelines within Timelines

[lunelson@gmail.com]

This is a beginner question—I'm just getting in to this—I notice that stagger methods seem to be for staggered application of a tween, as opposed to being able to stagger a timeline.

 

This pen is the only way I could think of, to stagger the application of a timeline animation. In this case, it's applied to 100 red boxes, but I'm not sure if it's the best way of doing it, in terms of memory etc. since it results in the creation of 100 TimelineLite instances... is there a more performant or concise way of doing it?

See the Pen ByZLoP by lunelson (@lunelson) on CodePen

[Carl]

Hi and welcome to the GreenSock forums.

 

Thanks for the demo. Its very helpful. 

Great to see you are already using some great techniques!

 

If you are super concerned about the memory-footprint of a TimelineLite, you could certainly flatten it and have only 1 timeline like so:

 

$boxes = $('.box');

 

var boxesTL = new TimelineLite();
$boxes.each(function(index){
  var insertionTime = 0.1 * index;
  boxesTL.from(this, 0.25, {autoAlpha: 0}, insertionTime)
         .from(this, 0.25, {rotation: '-=180deg'},  insertionTime + 0.125);
});

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

 

Frankly, in all my use-cases I have never see any detrimental side-effects of having too many timelines. 

I really wouldn't even consider it until you are dealing with thousands of them. 

I haven't created any formal stress tests either, just speaking anecdotally from experience.

[lunelson@gmail.com]

Thanks Carl,

 

that's a more efficient solution, I didn't think of just using the position value to offset them. I'll keep playing around with it!