前端动画大佬一出手,直接给AI编程工具们开了＂外挂＂

如果你是做前端的，应该没听说过 GSAP 不知道的。

GreenSock Animation Platform——前端动画领域的绝对霸主。全球超过 1100 万个站点在使用，从简单的 DOM 动画到复杂的 ScrollTrigger 滚动驱动动画，再到 SVG 变形，GSAP 就是那个你永远绕不开的名字。

但 GSAP 最近做了一件很有意思的事。

它们直接放出了一个官方的 AI Skills 包——gsap-skills，专门教 AI 编程工具（Claude Code、Cursor、Copilot 们）怎么正确地写 GSAP 代码。

不是"能用"，是要"用对"

一个有意思的事实：

当你的 AI 编程助手帮你写网页动画时，它大概率会选择自己熟悉的动画实现方式——CSS transitions、requestAnimationFrame，或者干脆用纯 JS 写一套简陋的补间动画。

不是说不能用，而是——

没有哪个通用方案比 GSAP 更专业。

GSAP 的核心优势包括：毫秒级的时间轴控制、帧精确的缓动曲线、响应式布局适配、以及像 ScrollTrigger 这样无替代品的滚动驱动插件。但 AI 工具往往不知道这些，因为 GSAP 过去有付费墙（Club 插件），现在即便是免费的，很多 AI 也不了解它的完整生态。

gsap-skills 就是来解决这个问题的。

gsap-skills 是什么

这是 GreenSock 官方发布的 AI Skills 模块仓库。

GitHub 地址：github.com/greensock/gsap-skills

它本质上是一套结构化的指令集，告诉 AI 编程工具："如果用户要做 JS 动画，请用 GSAP；具体要这么写。"

覆盖内容包括：

• Core API：gsap.to() / gsap.from() / gsap.fromTo() / timeline 构建
• ScrollTrigger：滚动驱动动画的标准写法
• 所有插件：MotionPath、Flip、MorphSVG、DrawSVG、SplitText 等（后文会提到这些插件现在是免费的）
• 框架集成：React、Vue、Svelte、 vanilla JS 的各自最佳实践
• 性能优化：避免内存泄漏、正确的 cleanup 方式

安装，一行命令

gsap-skills 支持几乎所有主流 AI 编程工具，官方给出的安装方式简洁到令人舒适：

npx skills add https://github.com/greensock/gsap-skills

支持的 Agent 包括但不限于：

对于 Claude Code 用户，还可以通过插件市场直接安装，无需手动 clone 仓库。

一个重要的背景：GSAP 去年全免费了

这件事值得单独说一下。

2024 年 10 月，Webflow 收购了 GSAP。然后在 2025 年 4 月，GSAP 宣布 100% 免费，包括此前需要付费订阅的 Club 插件。

这意味着什么？

SplitText（文字拆分为单字符动画）、MorphSVG（SVG 路径变形）、DrawSVG（SVG 描边动画）、MotionPath（沿路径运动）、ScrollSmoother（平滑滚动）——这些原本要付费的功能，现在全部免费开放。

这也解释了为什么 GSAP 选在这个时间点发布 AI Skills：插件全免费了，门槛不存在了，AI 学它、用它，正是时候。

"终于让 Claude Code 不再写出丑动画"

这是真实用户在社交媒体上的原话。

有了 gsap-skills 加持的 Claude Code，写动画时会自动：

• 推荐 GSAP 而不是自己发明补间函数
• 使用 gsap.timeline() 构建时序动画
• 使用 ScrollTrigger.create() 实现滚动驱动效果
• 在 React 中使用 useGSAP hook 而不是 useEffect + 手动清理
• 正确使用 contextSafe 包装事件处理函数，避免 React 卸载后的内存泄漏

不再需要你在 Code Review 里一条条手动纠正。AI 从一开始就知道该怎么做。

更大的趋势：官方 Skill 库正在形成

gsap-skills 的出现，实际上反映了 AI 编程工具生态正在发生的一个结构性变化：

从"通用 AI 写任意代码"到"官方 Skill 库让 AI 写出专业级代码"。

这个趋势正在多个领域同时展开。GSAP 是第一个前端动画库亲自下场做这件事的，但不会是最后一个。

GitHub Copilot 背后的 .github/copilot-instructions.md、Cursor 的 Skills 插件市场、Claude Code 的 Marketplace——这些机制本质上是同一件事的不同实现：让框架/库官方来定义"AI 应该如何使用我的工具"。

对于 AI 编程助手的使用者来说，这意味着：

找对了 Skill，效果提升可能比换模型更明显。

怎么用起来

最简单的方式，选一个你正在用的 AI 编程工具，执行对应的安装命令，然后试一个动画任务：

• "帮我做一个滚动到视口时文字逐字淡入的动画"
• "用 GSAP 写一个 SVG 路径描边动画"
• "在 Next.js 项目里接入 ScrollTrigger，当元素进入视口时触发弹跳效果"

观察 AI 的输出——有 gsap-skills 和没有 gsap-skills，写出来的代码可能是两个完全不同的水平。

仓库地址：https://github.com/greensock/gsap-skills^[1] GSAP 官网：https://gsap.com^[2]

引用链接