通过 position 参数理解多段动画是怎样同步、错位、重叠和接力的

Timeline / Position Lab

左边看结果，右边改编排关系

不再只看一条代码，而是直接比较“标题、卡片、按钮”到底是顺接、重叠，还是在中途切进来。

总时长 0.00s纯串联

Preview

场景预览

后一步会提前一点接进来

Weekly Pulse

把四段动效编排成一条可控时间线

这里故意把标题、卡片、按钮拆开，就是为了让 position 的差异更直观。

+18%新增线索

624激活用户

7.4%支付转化

按钮通常最适合做收尾。

Timing

时间条

最长步骤：-

Config

编排配置

右边只改关系，不改场景

预设

最像真实产品页的入场节奏，信息更紧凑，但不会一股脑全同步。

Position

标题顺接 +=0留白 +=0.12留白 +=0.24提前 -=0.12提前 -=0.24同步 <接力 >起点 25% <25%起点 50% <50%卡片顺接 +=0留白 +=0.12留白 +=0.24提前 -=0.12提前 -=0.24同步 <接力 >起点 25% <25%起点 50% <50%按钮顺接 +=0留白 +=0.12留白 +=0.24提前 -=0.12提前 -=0.24同步 <接力 >起点 25% <25%起点 50% <50%

标题 · <25%在最近动画开始后 25% 的位置切入。

卡片 · -=0.12比默认开始时间提前 0.12s，轻微重叠。

按钮 · -=0.12比默认开始时间提前 0.12s，轻微重叠。

节奏

easepower2.outpower3.outpower4.outsine.outback.out(1.4)容器时长0.56s标题时长0.48s卡片时长0.56s按钮时长0.42s卡片 stagger0.06s

总时长0.00s

重叠关系纯串联

const tl = gsap.timeline({
  defaults: { ease: 'power2.out' }
})

tl.from('.panel', { y: 32, opacity: 0, scale: 0.96, duration: 0.56 })
  .from('.title', { y: 24, opacity: 0, duration: 0.48 }, '<25%')
  .from('.card', { y: 20, opacity: 0, duration: 0.56, stagger: 0.06 }, '-=0.12')
  .from('.action', { y: 18, opacity: 0, duration: 0.42 }, '-=0.12')

为什么 timeline 很重要

单个 tween 只能解决一个元素从 A 到 B，但真实页面通常是多个元素协同变化：

• 标题先出现，卡片后跟上。
• 抽屉滑入时，遮罩同步淡入。
• 列表项一边入场，一边有局部重叠。 这类需求如果全靠多个独立 gsap.to()，会越来越难维护。timeline 的价值就是把这些动作变成一条可编排的时间轴。

defaults 有什么意义

const tl = gsap.timeline({
  defaults: {
    duration: 0.8,
    ease: 'power2.out'
  }
})

当多个步骤节奏相近时，把共性放进 defaults 能让时间线更短、更稳定，也更容易整体改节奏。

position 参数是时间线的灵魂

写法	直觉理解	适合什么场景
'+=0'	紧接上一步之后	串联流程
'+=0.2'	结束后再等 0.2s	留呼吸感
'-=0.3'	比默认开始时间提前 0.3s	制造重叠推进
'<'	与最近插入动画同时开始	同步启动
'>'	从最近插入动画结束点开始	接力衔接
'<25%'	相对最近插入动画的起点偏移一段百分比	更细腻的错位
'<50%'	在最近动画进行到一半时切入	适合多元素联动

怎么读下面的时间条

实验室里每个步骤都会显示：

• 开始时间
• 结束时间
• 在总时间轴中的占比

如果两条条形互相覆盖，说明两个步骤在时间上有重叠。这通常就是“更高级”的动效来源之一。

实战建议

先想“关系”，再写代码

比起一上来就写 tween，更好的顺序是：

1. 哪个步骤先开始。
2. 哪个步骤要重叠。
3. 哪个步骤要作为收尾。

不要一股脑全同步

所有东西同时动，页面会显得拥挤。适当用 '-=0.2'、'<25%' 做轻微错位，层次会立刻出来。

高复用场景优先 timeline

弹窗、抽屉、导航、页头切换，这类组件通常都会有多元素协同。越早改成 timeline，后面越省心。

一个常见模式

const tl = gsap.timeline({
  defaults: { duration: 0.7, ease: 'power2.out' }
})

tl.from('.panel', { y: 24, opacity: 0 })
  .from('.panel-title', { y: 16, opacity: 0 }, '<25%')
  .from('.panel-item', { y: 12, opacity: 0, stagger: 0.06 }, '-=0.2')

这个模式在首页 hero、侧边抽屉、卡片详情面板里都很实用。