Play with the options above to see how it affects the animation and the code below. Click any box to have the stagger emanate outward from that specific index number, using the from:[index] syntax.
gsap.to(".box", { duration: 1, scale: 0.1, y: 40, ease: "power1.inOut, stagger: { grid: [7,15], from: "center",
amount: 1.5 }});
All tweens recognize a stagger special property which can be an object, a number, or a function as described below:
An object makes configuration simple. It may contain any of the following properties:
amount is 1 and there are 100 elements that stagger linearly, there would be 0.01 seconds between each tween's start time. If you prefer to specify a certain amount of time between each tween, use the each property instead. A negative amount will invert the timing effect which can be very handy. So {amount:-1, from:"center"} would cause staggers to go from the outer edges in toward the center.each is 1 (regardless of how many elements there are), there would be 1 second between each tween's start time. If you prefer to specify a total amount of time to split up among the staggers, use the amount property instead. A negative each will invert the timing effect which can be very handy. So {each:-1, from:"center"} would cause staggers to go from the outer edges in toward the center.from:4 begins staggering at the 5th element in the array (because arrays use zero-based indexes). The animation for each element will begin based on the element's proximity to the "from" value in the array (the closer it is, the sooner it'll begin). You can also use the following string values: "start", "center", "edges", or "end". Default: 0.grid:[9,15]) so that GSAP can calculate proximities accordingly. Or use grid:"auto" to have GSAP automatically calculate the rows and columns using element.getBoundingClientRect() (great for responsive layouts). Grids are assumed to flow from top left to bottom right layout-wise (like text that wraps at the right edge). Or if your elements aren't arranged in a uniform grid, check out the distributeByPosition() helper function we created.grid, staggers are based on each element's total distance to the "from" value on both the x and y axis, but you can focus on just one axis if you prefer ("x" or "y"). Use the demo above to see the effect (it makes more sense when you see it visually)."power2" would start out with bigger gaps and then get more tightly clustered toward the end. Default: "none".A value of stagger: 0.1 would cause there to be 0.1 second between the start times of each tween. A negative value would do the same but backwards so that the last element begins first.
The function is called once for each target/element in the array and should return the total delay from the starting position (not the amount of delay from the previous tween's start time). The function receives the following parameters:
If you put your repeat in the top level of the vars object of your tween like gsap.to(... {repeat:-1, stagger:{...}), it waits for all of the sub-tweens to finish before repeating the WHOLE sequence, but if you prefer to have each sub-tween repeat independently (so that as soon as each one completes, it immediately repeats itself), simply nest the repeat (and yoyo if necessary) inside the advanced stagger object, like gsap.to(... {stagger:{repeat:-1, ...}}); Think of it almost like the advanced stagger object is a vars object for the sub-tweens.