GSAP 官方 AI 动画技能包

这是什么

GSAP AI Skills 是 GreenSock 官方发布的技能集合，专为 AI 编程助手设计，旨在教会 AI 如何正确使用 GSAP（GreenSock Animation Platform）动画库。GSAP 是一个高性能、框架无关的 JavaScript 动画库，广泛用于网页动画、交互效果和滚动驱动动画。该技能包包含 8 个核心技能模块，覆盖 GSAP 的核心 API、时间线、ScrollTrigger 插件、React/Vue/Svelte 集成以及性能优化等主题。

该技能包遵循 Agent Skills 格式，兼容 Cursor、Claude Code、Codex、Windsurf、Copilot 等 40+ 主流 AI 编程工具，让 AI 助手能够生成符合最佳实践的 GSAP 代码。

适合谁

前端开发者：希望借助 AI 加速动画开发，减少查阅文档的时间。
React/Vue/Svelte 用户：需要在框架中集成动画，并确保代码符合官方推荐模式。
网页设计师：想要为网站添加滚动动画、交互效果，但不想深入底层细节。
AI 工具使用者：使用 Cursor、Claude Code 等 AI 编程助手，希望提升 AI 生成代码的质量。

能做什么

该技能包包含以下 8 个技能模块：

技能名称	功能描述
gsap-core	核心 API：gsap.to()、from()、fromTo()、缓动、时长、stagger、默认值等
gsap-timeline	时间线：序列编排、位置参数、标签、嵌套、播放控制
gsap-scrolltrigger	滚动触发：滚动关联动画、固定、scrub、触发器、刷新与清理
gsap-plugins	插件：ScrollToPlugin、ScrollSmoother、Flip、Draggable、Inertia、Observer、SplitText 等
gsap-utils	工具函数：clamp、mapRange、normalize、interpolate、random、snap、toArray 等
gsap-react	React 集成：useGSAP hook、refs、gsap.context()、清理、SSR
gsap-performance	性能优化：优先使用 transform、避免布局抖动、will-change、批处理等
gsap-frameworks	Vue、Svelte 等框架：生命周期、作用域选择器、卸载清理

安装后，AI 助手会在你请求动画相关任务时自动加载这些技能，生成符合 GSAP 最佳实践的代码，例如：

// 1. 导入并注册插件（每个应用一次）
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

// 2. 单个动画——优先使用 transform 别名和 autoAlpha
gsap.to(".box", { x: 100, autoAlpha: 1, duration: 0.6, ease: "power2.inOut" });

// 3. 时间线——用于序列编排（优于链式 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——附加到时间线或顶层动画；布局变化后调用 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 });
// 布局变化后：ScrollTrigger.refresh();

使用前准备

安装 Node.js 和 npm（推荐使用最新 LTS 版本）。
确保你使用的 AI 编程工具支持 Agent Skills 格式（如 Cursor、Claude Code、Codex 等）。
了解基础的 JavaScript 或前端框架知识，以便理解生成的代码。

安装方法

推荐使用 npx skills 命令安装，该命令会自动检测你当前使用的 AI 工具：

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

如需指定目标工具（例如 Antigravity），可添加 --agent 参数：

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

对于 Claude Code，还可以通过插件市场安装：/plugin marketplace add greensock/gsap-skills。对于 Cursor，可以在设置中添加远程规则：greensock/gsap-skills。也可以手动克隆仓库，将 skills/ 文件夹复制到对应工具的技能目录（如 Claude Code 的 ~/.claude/skills/，Cursor 的 ~/.cursor/skills/ 等）。

使用示例

我有一个制作产品Landing Page的需求，不使用的情况下做的页面是这样的：

再使用GSAP Skill重新跑一个新的页面，效果如下：

对比还是非常显著的，第一个页面背景的线条看起来酷炫，但实际上这种设计容易让人眼花，而且和字体颜色有点重叠了。

第二个用Skill做的页面，页面很美观，也有丰富的动画，这还只是第一次生成的结果。

如果你平时经常做网站，不妨试试这个Skill。

风险与注意事项

风险等级：低——GSAP 是一个动画库，安全攻击面极小。
免费使用：GSAP 完全免费，包括所有插件。Webflow 收购 GSAP 后，原 Club GSAP 插件（SplitText、MorphSVG 等）已对所有人免费，包括商业用途。无需 Club 会员或私有注册表。
许可证：MIT 许可证，可自由使用和修改。
兼容性：技能包支持多种 AI 工具，但不同工具的安装方式可能略有差异，请参考官方文档。
性能注意：在 React 中使用时，务必使用 useGSAP hook 或 gsap.context() 进行清理，避免内存泄漏。