Help for stagger

[Myows]

Hi,

 

I cant quite get this right, help would be wonderful (and once my animation is finished, I will gladly contribute a tut to thank the community)

 

How can I stagger 3 elements, each starting 0.5 seconds after the previous. Each element would animate for 1 second, and then once all staggering is complete, my animation pauses.

 

Here's my attempt:

 

tl.staggerFrom ([item1, item2, item3], 1, {css:{top:-200}, ease:Bounce.easeOut, onComplete: pause}, 0.5, 2);

 

but with that, the pause occurs when the first element has finished it's tween (I'd like the pause to happen when the 3rd has finished)

 

Many thanks in advance

[Carl]

your onComplete is being applied to each tween in the staggerFrom(). staggerFrom()'s 7th parameter is onCompleteAll which I believe is what you want:

 

http://api.greensock.com/js/com/greensock/TimelineLite.html#staggerFrom()

 

tl.staggerFrom ([item1, item2, item3], 1, {css:{top:-200}, ease:Bounce.easeOut}, 0.5, 2, null, pause);

 

note if you don't want to get hung up on managing 7 parameters, you could also just use append() or call() right after the staggerFrom()

 

tl.staggerFrom ([item1, item2, item3], 1, {css:{top:-200}, ease:Bounce.easeOut}, 0.5, 2);
tl.append(pause);

//if you need to pass in params or scope use call
tl.call(pause, [param1, param2], someScope);

 

lots of options. hope this helps.

 

-c