Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

QuickTip: Stagger effects with cycle
Sign in to follow this  


| GreenSock
11789

Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. This includes dropping support for cycle in favor of using GSAP 3's new gsap.utils.wrap(). Please see the GSAP 3 release notes for details.

For updated demos that work with GSAP 3.0, see this demo and this demo

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

See the Pen SplitText with stagger and cycle by GreenSock (@GreenSock) on CodePen.

Parameters: index, target

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

  1. 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.
  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.
  • the cycle property is available in GSAP 1.18.0+

Get an all-access pass to premium plugins, offers, and more!

Join the Club

We love seeing what you build with GSAP. Don't forget to let us know when you launch something cool.

- Team GreenSock
Sign in to follow this  


User Feedback

Recommended Comments

There are no comments to display.



Guest
This is now closed for further comments

×