Tween Multiple object turn by turn in tweenlite

Question

Just say I have 5*5 movie clips .
I want to tween them with slighter delay and turn by turn.
what is best way to achieve this ?
as I think creating multiple tween may cause to performance am i right?
I am confused to achieve it in more optimised way.
Any help would be greatly appreciated.

Answer 1

Usually I'd do it like this:

for (var i:int = 0; i < 5; i++)
{
    TweenLite.to(object, duration, {delay: duration * i});
}

It will create all the Tweens at once, but they won't really effect your performance since only the active tweens are really noticeable.

I did that with over 200 objects and had no lag at all.
You might however want to pool the TweenLite object on mobile platforms, but again - you probably won't see the difference up to 800+ objects.

Answer 2

TweenMax, TimelineLite, and TimelineMax all have a "staggerTo()" method that makes this easier. For example:

TweenMax.staggerTo(yourArray, duration, {...properties...}, delayBetweenEach);

And as far as optimization, the entire engine is highly optimized, so you should be able to have hundreds or even thousands of tweens going simultaneously without much of a problem. It is much faster than other JavaScript engines (see http://www.greensock.com/js/speed.html for a comparison).

You can certainly do that manual loop to create individual tweens if you prefer, and just offset the delay for each one like the previous answer states. Absolutely nothing wrong with that, especially if you only want to use TweenLite for file size reasons.