以 skill 自身的术语
ScrollTrigger 是 GSAP 用于滚动关联动画的插件:可以在特定滚动位置触发 tween 和 timeline、固定(pin)区块、将进度与滚动同步(scrub),并通过 start/end 范围驱动一个 timeline。
它完整列出了配置词汇——trigger、包含 clamp() 和相对值的 start/end、endTrigger、scrub、toggleActions、pin 与 pinSpacing、snap、scroller、id、refreshPriority——并加入了用于批量、同步呈现渐现效果的 ScrollTrigger.batch()、用于第三方平滑滚动器的 scrollerProxy(),以及用于模拟横向滚动的 containerAnimation。每个选项都说明了默认值,并附有最佳实践清单,以及一份明确的「不要做」清单,涵盖 React 的清理、刷新顺序、缓动(ease)以及遗留的标记元素。
它产出什么
- 一个 tween 或 timeline,其进度通过 trigger 的 start 到 end 范围与滚动位置绑定。
- 一个未关联 tween 的独立 ScrollTrigger,配合回调函数使用,用于实现自定义行为,例如根据 self.progress 更新界面。
- 一个由 ScrollTrigger.batch() 返回的 ScrollTrigger 实例数组,每个 batch 目标对应一个实例。
- 根据 containerAnimation tween 产生的水平移动而触发的嵌套 tween。
工作方式
- 01注册一次插件
ScrollTrigger 是以插件形式提供的,而非核心动画 API 的一部分,因此它在脚本加载后只需注册一次,且要在任何 scrollTrigger 配置运行之前完成。
- 02附加一个 scrollTrigger 配置
一个 tween 或 timeline 会拥有一个 scrollTrigger 对象,指定触发元素以及描述触发元素相对视口位置的 start 和 end。
- 03选择滚动如何驱动播放头
scrub 让进度与滚动位置持续联动,可选带有一个数值型追赶延迟;而 toggleActions 则在四个临界点触发离散的 play/reverse 动作。
- 04固定一个区块并 scrub 一个 timeline
pinning 在范围处于激活状态时保持触发元素不动,附加到该 ScrollTrigger 上的 timeline 会让其子元素在同一个 start 到 end 的区间内推进。
- 05批量处理同时进入的元素
ScrollTrigger.batch() 会为每个目标创建一个 ScrollTrigger,并在一小段间隔内收集它们的回调,从而可以用一次调用配合 stagger 为几乎同时进入的元素设置动画。
- 06内容消失时销毁实例
移除已添加动画的元素或切换页面(例如在单页应用中),都需要销毁相关实例,以避免它们继续针对已失效的元素运行。