Stagger 错开动画

给一组目标同一套 vars，但让它们的启动时间错开。列表入场、网格炸开、文字逐字出现都靠它。

两种写法

// 简写：每个目标间隔 0.1s
gsap.from(".item", { y: 40, opacity: 0, stagger: 0.1 });

// 对象：控制总时长、起点、网格
gsap.from(".cell", {
  scale: 0,
  stagger: { each: 0.05, from: "center", grid: [4, 6] }
});
字段说明
each相邻两个之间的间隔（秒）
amount整组错开占用的总时长；与 each 二选一
from"start" / "center" / "end" / "random" / 数字下标 / "edges"
grid[rows, cols] 或 "auto"，按矩阵算距离
axis"x" 或 "y"，只沿一轴传播
ease错开时间本身的缓动（不是元素运动的 ease）
repeat / yoyo只作用于 stagger 序列
基础：按 DOM 顺序
1
2
3
4
5
gsap.from("#staggerStage .box", {
  y: 50,
  opacity: 0,
  duration: 0.7,
  stagger: 0.12,
  ease: "back.out(1.6)"
});
from: "center" — 从中间往两边
1
2
3
4
5
gsap.from("#staggerStage2 .box", {
  scale: 0,
  opacity: 0,
  duration: 0.55,
  stagger: { each: 0.1, from: "center" }
});
grid：矩阵涟漪
12 个方块按 3×4 网格，从中心扩散。
gsap.from("#gridStage .cell", {
  scale: 0,
  duration: 0.45,
  ease: "back.out(1.8)",
  stagger: { each: 0.05, from: "center", grid: [3, 4] }
});