ScrollTrigger 滚动触发

把滚动位置映射成动画进度。本页下方有足够空白，请向下滚动看进入视口、scrub、pin 三种模式。更完整的落地效果见案例「横向画廊」「钉住叙事」。

使用前：gsap.registerPlugin(ScrollTrigger)。改过 DOM 高度后调用 ScrollTrigger.refresh()。调试时加 markers: true 看 start/end 绿红线。

核心配置

属性	说明
`trigger`	用谁的位置来算进度
`start`	默认 `"top bottom"`：元素顶碰到视口底。格式 `"元素位置视口位置"`，如 `"top 80%"`
`end`	如 `"bottom top"` 或 `"+=400"`（再滚 400px）
`scrub`	`true` 进度锁滚动；数字（如 1）表示平滑跟随的秒数
`pin`	把 trigger（或指定元素）钉在视口，直到 end
`pinSpacing`	钉住时是否垫高度，避免后面内容跳上来
`toggleActions`	四个词：onEnter onLeave onEnterBack onLeaveBack，取值 play pause resume reverse restart reset complete none
`toggleClass`	进入时加 class
`once`	只触发一次
`invalidateOnRefresh`	刷新时重算函数型取值（响应式宽度）
`anticipatePin`	钉住前微调，减少抖动

独立创建（不绑在 tween 上）

ScrollTrigger.create({
  trigger: ".section",
  start: "top 60%",
  onEnter: () => console.log("entered"),
  onLeaveBack: () => console.log("left backward")
});

模式 A：进入视口播放（toggleActions）

滚到盒子进入视口约 80% 处播放；滚回去则 reverse。

gsap.to("#scrollBox", {
  x: 400, rotation: 360, duration: 1.2,
  scrollTrigger: {
    trigger: "#scrollBox",
    start: "top 80%",
    toggleActions: "play none none reverse"
  }
});

↓ 继续向下，看 scrub 段 ↓

模式 B：scrub — 进度绑在滚动上

来回滚，盒子会跟着走，没有自己的 duration 时间感。

SCRUB

gsap.to("#scrubBox", {
  x: 420,
  ease: "none",
  scrollTrigger: {
    trigger: "#scrubWrap",
    start: "top 70%",
    end: "bottom 30%",
    scrub: 0.6   // 略微平滑，减轻抖动
  }
});

↓ 再往下是 pin 演示 ↓

模式 C：pin — 钉住再播完

本卡片会钉住一小段滚动，同时内部条变宽。案例页有更长叙事版本。

滚过 pin 后页面恢复正常流动。记得在生产环境关掉 markers。