在独立滚动容器里练 start、end、scrub 和 pin 的关系，避免把 VitePress 整页滚动直接绑进动画。

ScrollTrigger Lab

左边滚动看结果，右边改 start / end / scrub / pin

预览区使用独立滚动容器，不把整页滚动绑进实验。这样最接近文档站里真实可控的写法。

滚动 0%动画 0%待触发

预览

左侧独立滚动，直接看区间变化带来的结果。

滚动位置0%

动画进度0%

Before Trigger

先给一点铺垫，再进入被观察的区间

右侧改的是触发关系，不是组件样式本身。保持同一张卡片，才能看清楚差异到底来自哪里。

Trigger Zone

这里就是被 ScrollTrigger 观察的区间

如果开了 pin，同一张卡片会在这段里停住；如果开了 scrub，滚动会直接拖着动画走。

Narrative Card

让同一块内容停留多久，取决于你给了多长的滚动区间

Reveal 负责进场，Scrub 负责把滚动映射成连续进度，Pin 负责把讲解时间拉长。

narrative depth

startendscrubpin

• 独立 scroller 更适合文档站 demo。
• 区间短，动画会更像一次点到即止的入场。
• 区间长，用户会感觉内容在被逐步解释。

After Trigger

离开区间以后，页面继续自然往下读

这也是 pin 应该克制使用的原因。它很有效，但每固定一段，页面阅读就会被打断一次。

配置

只留这页最关键的四个变量。

starttop 88%top 82%top 72%center centerend180pxscrubpin

start = top 82%，决定动画从哪里开始算。

end = +=180，这段区间长度是 180px。

scrub = false，进入区间后只播放一次，不跟手。

pin = false，内容会自然滚过去。

markers = true，start / end 调试线始终可见。

gsap.timeline({
  scrollTrigger: {
    id: 'scroll-trigger-lab',
    trigger: '.gsap-scroll-trigger-lab__scene',
    scroller: previewScroller,
    start: 'top 82%',
    end: '+=180',
    scrub: false,
    pin: false,
    markers: true,
    toggleActions: 'play none none reverse'
  }
})

这页重点解决什么问题

• ScrollTrigger 到底应该绑在哪个滚动容器上。
• start 和 end 改的是触发区间，而不是视觉样式本身。
• scrub 与 pin 应该什么时候用，什么时候不用。

三种最常见的页面用法

模式	适合场景	核心判断
Reveal	内容区块、证明卡片、滚动介绍	信息进入视口时播放即可，不需要把滚动映射成连续进度
Scrub	进度条、镜头推进、对比切换	用户滚动多少，动画就推进多少
Pin	产品叙事、价格讲解、专题页分段说明	同一块内容值得被固定在视口里反复解释

实战建议

• 在文档站里优先给 demo 自己的 scroller，不要把整页滚动直接绑死。
• pin 要尽量少用，只给真正重要的叙事区。
• scrub 适合主线，不适合把页面所有元素都做成“拖着走”。

生产注意点

• 页面重播、切路由或组件卸载前，记得清掉 trigger 并 context.revert()。
• 如果用户开启了 prefers-reduced-motion，应该退回静态可读版本。
• pin 一定要在移动端单独看一遍，避免内部滚动区高度不够。