GSAP ScrollTrigger 是一个用于创建滚动驱动动画与交互的技能。
用途：将动画进度与页面滚动位置关联，实现元素随滚动出现、滚动绑定播放、页面固定、水平滚动、视差与分批入场等效果。适用于需要滚动叙事的网页场景。
主要能力：
- 基础 ScrollTrigger：通过 trigger 指定触发元素，用 start/end 定义起止位置（格式为“触发元素位置 视口位置”，如 top center、top 80%、center center、bottom top、top top+=100），并用 toggleActions 控制进入和离开时的行为。
- 滚动绑定（scrub）：scrub: true 直接把动画进度绑定到滚动位置，也可用数字实现平滑（如 scrub: 1 表示 1 秒平滑）。可配合时间线，用 pin: true 固定容器，end: '+=3000' 设置滚动距离，再按步骤播放各阶段动画。
- 固定（pinning）：ScrollTrigger.create 中使用 pin: true 固定元素，end: '+=500' 指定固定滚动距离；pinSpacing 控制是否保留占位空间（默认 true，可设为 false 或自定义如 '500px'）。
- 吸附点（snap）：snap: 1/4 表示按四分之一吸附；也可用 snapTo: 'labels' 吸附到时间线标签，或在对象中配置 snapTo 数组、duration、delay、ease、directional。
- 回调：支持 onEnter、onLeave、onEnterBack、onLeaveBack、onUpdate（可读取 self.progress、self.direction、self.velocity）、onToggle、onRefresh。
- 视差：用 gsap.to 配合 yPercent 与 scrub 实现多层视差，背景移动较慢、前景移动较快，可按层配置不同速度。
- 水平滚动：对多个面板用 xPercent 配合 pin、scrub、snap，并以 end 回调计算容器宽度。
- 开发标记：markers: true 显示可视标记，可自定义颜色与字号。
- 批量动画：ScrollTrigger.batch 对同类元素分批触发，支持 interval、batchMax 以及 onEnter/onLeave/onEnterBack/onLeaveBack。
- 常见模式：滚动显现（reveal）、进度指示条、粘性头部变换，以及倒计时与时间膨胀等展示效果。
使用方式：先 npm install gsap；然后 import gsap from 'gsap' 和 import { ScrollTrigger } from 'gsap/ScrollTrigger'；调用 gsap.registerPlugin(ScrollTrigger) 注册插件；再在 gsap.to/timeline 或 ScrollTrigger.create 中通过 scrollTrigger 配置触发元素、起止位置、scrub、pin、snap 等参数。
适用场景：滚动驱动的网页动效，如滚动显现、滚动绑定进度条、固定与水平滚动画廊、多层视差、分批入场列表。
限制：使用前须注册插件；固定与吸附需合理设置 start/end 与滚动距离；移动端可通过 ScrollTrigger.matchMedia 分别处理；尺寸变化后可用 ScrollTrigger.refresh() 刷新，用 kill/killAll 清理触发器。更多动画基础、时间线组合与 React 集成可参考 gsap-fundamentals、gsap-sequencing、gsap-react 等相关内容。