gsap-scrolltrigger

GSAP ScrollTrigger 用于把动画绑定到页面或容器的滚动位置，可实现滚动驱动效果、元素固定（pin）、scrub、吸附（snap）以及滚动回调。安装方式为 npm install gsap，然后通过 import gsap from 'gsap'、import { ScrollTrigger } from 'gsap/ScrollTrigger' 并执行 gsap.registerPlugin(ScrollTrigger) 启用插件。基本用法是在 gsap.to 的 scrollTrigger 配置中设置 trigger、start、end 和 scrub；scrub 可为 true 或数值以加入平滑。支持 pin 固定触发元素或指定元素，可用 pinSpacing 控制间距；toggleActions 按 onEnter、onLeave、onEnterBack、onLeaveBack 控制播放、暂停、反向等动作。提供 onEnter、onLeave、onUpdate 等回调及 onRefresh、onScrubComplete，可通过 self 读取 progress、direction、isActive、getVelocity() 等数据。位置语法支持 top/center/bottom 与像素、百分比、相对值及函数；可与 timeline 集成，也支持 snap 吸附、markers 开发标记、横向滚动、嵌套 ScrollTrigger、ScrollTrigger.batch 批量操作、自定义 scroller。实例方法有 scroll、refresh、update、enable、disable、kill，静态方法有 getAll、refresh、scroll。使用限制与注意：DOM 变化后需调用 ScrollTrigger.refresh() 更新位置；自定义滚动容器必须指定 scroller；多个 pin 可能冲突；大量元素使用 scrub 影响性能，官方建议谨慎 scrub、按需 pin、用 toggleActions 替代、开发时用 markers 并在生产移除。部分高级用法和完整 API 详见官方文档，本文未展开。