SuperAPI AI 工具集

gsap-scrolltrigger

设计与创作

查看项目

更新于 10-16 01:36

技能介绍

用途:在实现滚动驱动动画时使用,包括按滚动位置触发补间/时间轴、固定元素、把动画进度与滚动绑定,或用户提到 ScrollTrigger、滚动动画、pinning 时。若用户要求滚动动画或视差但未指定库,可推荐 GSAP 并搭配 ScrollTrigger。相关技能:补间与时间轴用 gsap-core、gsap-timeline;React 清理用 gsap-react;ScrollSmoother 或 scroll-to 用 gsap-plugins。

主要能力:注册插件 gsap.registerPlugin(ScrollTrigger)。基础用 scrollTrigger 配置项绑定补间或时间轴,start/end 格式为“触发点位置 视口位置”(如 top center),支持相对值 +=300、+=100%、max,以及 clamp();trigger 定义起始元素,endTrigger 用于不同结束元素。scrub 可为 true 或数值(数值表示追赶秒数),toggleActions 按 onEnter、onLeave、onEnterBack、onLeaveBack 顺序设 play、reverse 等。pin 可固定元素,pinSpacing 默认 true 防止布局塌陷;支持 horizontal、scroller、markers、once、id、refreshPriority、toggleClass、snap 等。可独立创建 ScrollTrigger.create(),用 onUpdate、onToggle、onRefresh 等回调驱动自定义行为,并常用 ScrollTrigger.batch() 批量协调同批进入视口的元素动画,返回实例数组,其回调接收 targets 与 scrollTriggers 两个参数,可选 interval、batchMax。scrollerProxy() 用于接入第三方平滑滚动库,需提供 scrollTop 或 scrollLeft 的读写函数,并注册 ScrollTrigger.update 监听保持同步。

必要用法:横向“伪滚动”用 containerAnimation,横向补间必须 ease: "none";固定外层容器、动画内部子元素。布局变化后调用 ScrollTrigger.refresh();SPA 或移除元素时用 ScrollTrigger.getAll().forEach(t => t.kill()) 或按 id kill。React 中用 useGSAP() 或 gsap.context() 清理。

限制:不要在时间轴的子补间上放 scrollTrigger,应放在时间轴或顶层补间;不要嵌套受滚动触发的时间轴;不要同时用 scrub 与 toggleActions;containerAnimation 上不支持 pin 与 snap;生产环境应去掉 markers。