HTML5 / JS

Flash

QuickTip: Stagger effects with cycle

March 15th 2018 |Carl

6742

Traditionally animations created with the stagger methods (staggerTo, staggerFrom(), staggerFromTo()) required that all elements animate from and to the same values. With the cycle property you can now stagger the animations of multiple object with an unlimited amount of variance in the values you are tweening to or from. This allows you to create very rich and seemingly complex animations with very little code.

Video

Instead of defining a single value (like x:100, rotation:90), you can define an Array of values to cycle through (like cycle:{x:[100,-100], rotation:[30,60,90]}) or even use function-based values (like cycle:{x:function() { return Math.random() * 200; }}). The amount of functionality you can pack into a single line of code is staggering (pun intended).

Demo: Cycle with TweenMax

Demo: Cycle with TimelineMax

Parameters: index, target

When defining cycle values with functions the functions are passed two parameters:

index(integer) - the target's position in the array of targets. For example, if there are 3 <div> elements with the class ".box", and you TweenMax.staggerTo(".box", ...), the function would get called 3 times (once for each target) and the index would be 0 first, then 1, and finally 2.

target(object) - the target itself (the <div> element in this case)

Caveats

The cycle property is available only in the staggerTo(), staggerFrom(), and staggerFromTo() methods in TweenMax, TimelineLite and TimelineMax.