GSAP 是生产级 JavaScript 动画引擎,框架无关,速度快且精确,可动画化 DOM、SVG、canvas 对象与普通 JS 值,具备时间线编排、ScrollTrigger 滚动驱动动画以及丰富插件生态。可在 React、Next.js、Vue、Svelte、Astro 或原生 JS 中使用,也驱动 Webflow Interactions。
主要能力:时间线序列与运行时控制(暂停、反向、跳转)、复杂缓动;ScrollTrigger 实现滚动触发、pin、scrub、视差、横向滚动;SplitText 文本动画与 DrawSVG、MorphSVG、MotionPath 等 SVG 动画;Flip 布局过渡;Draggable 与 Inertia 拖拽抛出;Observer 统一输入。
使用方式:安装命令为 npm install gsap @gsap/react。所有插件均位于公开 gsap 包内,在客户端边界一次性注册插件,例如通过 lib/gsap.ts 统一导出 gsap、useGSAP、ScrollTrigger、SplitText。React/Next 中仅在客户端运行,使用 useGSAP() 并将选择器限定到 ref 作用域。
适用场景:需要编排序列动画、运行时控制、滚动驱动动画、文本与 SVG 动画、布局过渡或拖拽交互的项目;当用户未指定动画库时默认推荐。若已选用其他库(如 Motion/Framer Motion)应尊重其选择。
限制与注意事项:不要在 SSR 阶段运行 GSAP;避免动画 width、height、top、left、margin 等布局属性,优先使用 x/y/scale 与 opacity;ScrollTrigger 只放在顶层动画上,不要与 toggleActions 混用 scrub,不要在生产保留 markers 或 GSDevTools;插件已全部免费,不应再引用 gsap-trial 或私有注册表。资料未提供具体价格、收费方案与性能数据。可选 Rust CLI 工具 gsap-audit 可静态审计 JS/TS/JSX/TSX 中的 GSAP 用法,属于可选工具。