elite-gsap

用途：该技能提供 GSAP 动画库的完整参考，用于构建高性能网页动画，涵盖滚动触发、文本拆分、布局过渡、SVG 变形与绘制、路径运动、时间轴编排及平滑滚动等场景。资料称 2026 年 Webflow 收购后所有插件（含原 Club 插件）可免费商用，无授权限制。\n\n主要能力：内附 ScrollTrigger、SplitText、Flip、MorphSVG、DrawSVG、MotionPathPlugin、Physics2D、Inertia、CustomEase 等插件说明，以及时间轴、框架集成、工具库、Lenis 平滑滚动等参考文件。\n\n用法：通过 npm install gsap 安装；在入口处用 gsap.registerPlugin(...) 注册插件。建议用 gsap.context() 限定动画作用域并在卸载时 ctx.revert() 清理，避免 SPA 内存泄漏。支持 gsap.to/from/fromTo/set、交错 stagger、多种缓动、回调及 gsap.matchMedia() 配合 prefers-reduced-motion。ScrollTrigger 可实现滚动动画、钉住和 scrub；SplitText 拆分字符行；Flip 捕获状态后播放布局变化；时间轴可组合控制。性能上只动画 x/y、scale、rotation、opacity 等 GPU 加速属性，避免 width、height、margin 等引发重排的属性。\n\n适用场景：营销页滚动叙事、横向滚动区、粘性区块、文字揭示、磁吸按钮、列表/卡片布局过渡与 SVG 动画。\n\n限制：本资料为参考文档，未提供具体收费与价格信息；框架集成细节需查阅对应参考文件；示例中的部分 API 与插件行为以 GSAP 官方文档为准。