SuperAPI AI 工具集

gsap-scrolltrigger

设计与创作

查看项目

更新于 10-15 21:47

技能介绍

用途:本技能面向使用 GSAP(GreenSock Animation Platform)及其 ScrollTrigger 插件创建网页动画与滚动驱动体验的开发者,覆盖从简单 UI 过渡到复杂滚动叙事。

主要能力:GSAP 提供补间(gsap.to/from/fromTo)、时间线(gsap.timeline)用于编排多个动画,支持位置参数控制时序与标签。ScrollTrigger 支持滚动触发、scrub 滚动同步、pin 固定元素、toggleActions 控制四个滚动节点行为、start/end 位置定义、snap 吸附、batch 批量动画与 stagger 交错动画。

使用方式:需先注册插件 gsap.registerPlugin(ScrollTrigger)。通过 scrollTrigger 配置对象设置 trigger、start、end、scrub、markers、pin 等。可与 Three.js/WebGL、React(useGSAP Hook)、Locomotive Scroll 集成,也支持 ScrollToPlugin 平滑滚动与 matchMedia 条件动画。

适用场景:滚动叙事网站、视差效果、横向滚动区块、图片序列擦除、交互式 UI 过渡等。

限制与注意:避免对同一元素叠加多个补间导致跳变,可用 fromTo 或 immediateRender:false;多元素应循环创建独立触发器;时间线内不要给单个补间加 ScrollTrigger,应加在父时间线上;动画优先使用 transform/opacity 以利用 GPU 加速;需及时 kill 触发器并在 resize 后 refresh。资料未提供收费、价格与平台信息。