装完这8个GSAP官方Skill，AI写动画终于不翻车了

AI 做动画，要么能跑但质感廉价，要么根本不会用 ScrollTrigger。

GSAP 官方 2025 年干了件聪明事——直接给 AI 训练了一套「动画最佳实践 Skill」，让它学会怎么正确地写 GSAP 代码。

这个 Skill 是什么

GSAP AI Skills 是 GreenSock 官方出品的 8 个 Claude Code Skill 合集，装完以后 AI 写动画自动带「专业感」。

不是让你学 GSAP，是让 AI 学会用 GSAP。

GitHub 上 14.3k Star，官方维护，覆盖所有主流 AI 编程工具：Claude Code、Cursor、Windsurf、Copilot、Codex 等 40+ 工具通吃。

8 个 Skill 分别管什么

• gsap-core：核心 API——gsap.to() / from() / fromTo() / 缓动函数 / stagger / matchMedia 响应式
• gsap-timeline：时间轴编排，多段动画顺序控制，位置参数（”+=0.2″ / “-=0.1” 这种）
• gsap-scrolltrigger：滚动驱动动画——视差、固定滚动、scrub 同步
• gsap-plugins：ScrollSmoother、Flip、Draggable、SplitText 等插件的正确用法
• gsap-react：React 里的 useGSAP hook / refs / gsap.context() 自动清理
• gsap-frameworks：Vue / Svelte / Nuxt 集成，生命周期和作用域选择器
• gsap-performance：用 transform 而非布局属性、will-change 策略、批量处理
• gsap-utils：clamp / mapRange / normalize / random 等工具函数正确用法

为什么值得装

AI 生成动画代码最容易翻车的地方：时间轴乱序、ScrollTrigger 刷新时机忘写、React 组件卸载后动画没清理、用的不是 transform 性能属性。

这套 Skill 解决的就是这些问题——它把 GSAP 官方多年积累的「最佳实践」打包成 AI 能理解的标准操作指引。

你只需要说「帮我做一个滚动视差卡片」，AI 就会按 ScrollTrigger 标准写法来写，而不是糊一个能跑但卡顿的版本。

怎么装

Claude Code：
/plugin marketplace add greensock/gsap-skills

通用（任何 Agent 工具）：
npx skills add https://github.com/greensock/gsap-skills

GitHub（14.3k★）：https://github.com/greensock/gsap-skills

GitHub: https://github.com/greensock/gsap-skills