GSAP 官方 AI Skills：让 Agent 学会正确使用网页动画引擎
GSAP 官方发布了一套 8 个 AI Skill，专门教 AI Agent 正确使用这套网页动画引擎——核心 API、Timeline、ScrollTrigger、插件、React/Vue/Svelte、性能优化全覆盖。Webflow 收购后所有原 Club 付费插件（SplitText、MorphSVG 等）已全部免费。
GSAP（GreenSock Animation Platform）是前端动画领域的事实标准，但 AI 写 GSAP 经常翻车：插件没注册、忘记 cleanup、用 layout 属性而非 transform、ScrollTrigger 不 refresh。这套官方 Skill 解决的就是这些问题——让 Agent 按 GSAP 团队认可的正确方式生成代码。
仓库地址：https://github.com/greensock/gsap-skills
安装
支持 Claude Code、Cursor、Codex、Copilot、Antigravity 等 40+ Agent，统一用 npx skills CLI：
npx skills add https://github.com/greensock/gsap-skills
CLI 会自动检测已安装的 Agent。想指定某个（比如 Antigravity）加 --agent 参数。Claude Code 也可以用 /plugin marketplace add greensock/gsap-skills。
8 个 Skill 覆盖范围
| Skill | 解决什么 |
|---|---|
| gsap-core | 核心 API：gsap.to/from/fromTo、easing、duration、stagger、defaults、transform 别名、autoAlpha、gsap.matchMedia() 响应式与 prefers-reduced-motion |
| gsap-timeline | 时间线：序列、position 参数、labels、嵌套、playback |
| gsap-scrolltrigger | 滚动联动：pin、scrub、trigger、refresh、cleanup |
| gsap-plugins | 插件：ScrollToPlugin、ScrollSmoother、Flip、Draggable、Inertia、Observer、SplitText、ScrambleText、SVG/物理插件、CustomEase 等 |
| gsap-utils | gsap.utils：clamp、mapRange、normalize、interpolate、random、snap、toArray、wrap、pipe |
| gsap-react | React：useGSAP hook、refs、gsap.context()、cleanup、SSR |
| gsap-performance | 性能：transform 优于 layout 属性、will-change、批处理、ScrollTrigger 优化 |
| gsap-frameworks | Vue/Svelte/其他：lifecycle、scoping selector、unmount cleanup |
重要变化：Club 插件全免费
Webflow 收购 GSAP 后，原 Club GSAP 付费层取消，所有原 Club 专属插件（SplitText、MorphSVG、DrawSVG 等）对所有人免费，包括商业用途。统一从公共 gsap npm 包安装，不需要 .npmrc、auth token 或私有 registry。
npm install gsap
标准 GSAP 代码范式
这套 Skill 教 Agent 生成的标准模式大致是这样：
// 1. 导入 + 注册插件（每个 app 一次）
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);
// 2. 单个 tween —— 优先用 transform 别名和 autoAlpha
gsap.to(".box", { x: 100, autoAlpha: 1, duration: 0.6, ease: "power2.inOut" });
// 3. Timeline 做序列（优先于链式 delay）
const tl = gsap.timeline({ defaults: { duration: 0.5, ease: "power2" } });
tl.to(".a", { x: 100 })
.to(".b", { y: 50 }, "+=0.2")
.to(".c", { opacity: 0 }, "-=0.1");
// 4. ScrollTrigger —— 挂到 timeline 或顶层 tween；布局变化后调 refresh
const tl2 = gsap.timeline({
scrollTrigger: {
trigger: ".section",
start: "top center",
end: "bottom center",
scrub: true
}
});
tl2.to(".panel", { x: 100 })
.to(".panel", { rotation: 5, duration: 0.7 });
React 里用 useGSAP + scope + cleanup，避免没有 scope 的 selector：
import { useGSAP } from "@gsap/react";
gsap.registerPlugin(useGSAP);
useGSAP(() => { gsap.to(ref.current, { x: 100 }); }, { scope: containerRef });
小结
这套 Skill 的价值不只是教 GSAP 语法，而是把 GSAP 团队多年积累的最佳实践（cleanup、transform 优先、refresh 时机、插件注册）变成 Agent 能直接执行的规则。对于做动画密集型项目、可视化大屏、产品落地页的工作流，装上之后 AI 生成的 GSAP 代码会明显少踩坑。
MIT 协议，风险等级 LOW。
加载评论中...