把列表和网格动画里最重要的 stagger 参数拆开，让 amount、each、from、axis 的差异直接可见

Stagger Lab

左边看顺序怎么扩散，右边改参数怎么分发

同一组 12 个块保持不变，只改 stagger 关系。这样能直接看出是顺序变了，不是元素本身变了。

12 Items1.1s Span待播放

预览

每张卡左上角的数字代表出场顺序，和右侧配置一一对应。

播放进度0%

#9

Hero

首屏

第一印象

delay 0.8s1-1

#3

Value

卖点

一句讲清

delay 0.2s1-2

#4

Proof

证明

信任建立

delay 0.3s1-3

#10

CTA

动作

引导点击

delay 0.9s1-4

#7

Spec

参数

理性补充

delay 0.6s2-1

#1

Demo

演示

快速理解

delay 0s2-2

#2

Story

叙事

情绪连接

delay 0.1s2-3

#8

Price

价格

决策门槛

delay 0.7s2-4

#11

FAQ

疑问

提前回答

delay 1s3-1

#5

Team

团队

可信来源

delay 0.4s3-2

#6

Case

案例

结果展示

delay 0.5s3-3

#12

Footer

收尾

继续行动

delay 1.1s3-4

配置

只保留会直接改变分发结果的参数。

modeamounteachamount1.1sfromstartcenteredgesendrandomindex 5axisnullxy

当前用 amount，整组分发总时长固定在 1.1s。

from = center，最先启动的是 6 / 7 / 2 / 3。

axis = null，会按二维距离一起扩散。

gsap.from('.grid-item', {
  opacity: 0,
  y: 28,
  scale: 0.84,
  duration: 0.56,
  ease: 'power2.out',
  stagger: {
    amount: 1.1,
    from: 'center',
    grid: [3, 4],
    axis: null
  }
})

stagger 到底在控制什么

当你给一组元素加动画时，stagger 不是在改每个元素自己的动画内容，而是在决定：

• 谁先动。
• 谁后动。
• 相邻元素间隔多久。
• 这个顺序是从哪里开始扩散的。

amount 和 each 的区别

参数	关注点	适合什么情况
amount	总分发时长	不管元素多少，都想让整组动画控制在固定时间内
each	单个元素之间的间隔	你更在意每个元素出场的节奏密度

一个直觉

• 元素数量经常变动时，优先考虑 amount
• 元素数量稳定、节奏要统一时，优先考虑 each

from 会改变波纹从哪里开始

值	效果
start	从第一个元素依次推进
end	从最后一个元素反向推进
center	从中心扩散出去
edges	从四周往中间包夹
random	打乱顺序
数字索引	从指定元素开始

axis 什么时候有用

如果你的元素是网格而不是单行列表，axis 会非常有用：

• x 更强调列方向。
• y 更强调行方向。
• null 会同时参考二维距离。

这也是为什么同样一个 center，在不同 axis 下看起来会像不同的扩散模式。

一个常见写法

gsap.from('.grid-item', {
  opacity: 0,
  y: 24,
  scale: 0.85,
  duration: 0.6,
  ease: 'power2.out',
  stagger: {
    amount: 1.2,
    from: 'center',
    axis: null
  }
})

什么时候该克制 stagger

• 管理后台的表格和高频列表，不适合每次都做强烈 stagger。
• 元素太多时，过大的 amount 会拖慢整体进入速度。
• 如果页面已经有主时间线，stagger 应该服务于主节奏，而不是抢镜。

推荐起步值

• 列表：each: 0.04 ~ 0.08
• 6 到 12 个元素的网格：amount: 0.8 ~ 1.4
• 内容型页面：优先 power2.out
• 风格化页面：可以尝试 back.out(1.7) 或更大的位移