Stagger

Animates multiple elements one after another.

HTML

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

Example

gsap.to(".box", {
  y: -100,
  duration: 1,
  stagger: 0.3
});

What Happens?

Box1 ---->
      0.3s
Box2 ---->
      0.3s
Box3 ---->
      0.3s
Box4 ---->

Advanced Stagger

gsap.to(".box", {
  y: -100,
  duration: 1,
  stagger: {
    each: 0.2,
    from: "center"
  }
});

Result

Animation starts from center element and spreads outward.