交错动画

是什么

交错动画（Stagger）是给一组目标应用同一段补间，但让每个元素的开始时间依次错开。在 GSAP 里只需在 gsap.to / gsap.from 中加一个 stagger 参数：写数字表示相邻元素之间的间隔秒数，写对象则可以控制起点方向、网格分布和间隔本身的缓动。

上方演示是一个 5 行 7 列的网格。入场时 from: 'center' 让中间的方块最先弹出，再按与中心的距离依次向外扩散；退场时换成 from: 'edges'，从四周向中间收拢。整个效果只用了两段补间。

核心参数

参数	含义
each	相邻元素开始时间的间隔（秒），直接写数字等同于它
amount	整组分摊的总间隔，元素越多、单个间隔越小
from	起点：'start'、'center'、'end'、'edges'、'random' 或索引数字
grid	[行, 列] 或 'auto'，按二维距离计算先后
axis	配合 grid，只按 'x' 或 'y' 方向计算
ease	让间隔本身先密后疏或先疏后密

代码示例

import { gsap } from 'gsap';

// 35 个 .cell 放在 7 列的 CSS Grid 里（5 行 × 7 列）
const cells = document.querySelectorAll('.cell');

const tl = gsap.timeline({ repeat: -1, repeatDelay: 0.4 });
tl.from(cells, {
  scale: 0,
  opacity: 0,
  duration: 0.6,
  ease: 'back.out(2)',
  stagger: { each: 0.035, from: 'center', grid: [5, 7] },
}).to(cells, {
  scale: 0,
  opacity: 0,
  duration: 0.4,
  ease: 'power2.in',
  stagger: { each: 0.025, from: 'edges', grid: [5, 7] },
}, '+=1');

什么时候用

• 列表、卡片、导航项的入场，让视线自然地从第一项扫到最后一项。
• 网格或图标墙的扩散效果，配合 grid 和 from: 'center'。
• 标题逐字、逐行出现，与文字拆分配合使用。

常见误区

• 间隔过大：元素一多，总时长会迅速变长，用户要等很久才能看全内容。数量不定时优先用 amount 控制总时长。
• 网格写成 grid: [列, 行]：GSAP 的顺序是先行后列，写反了扩散中心会偏。
• 把间隔写进每个元素的 delay 手动累加：既繁琐又难调整，直接交给 stagger。