GSAP AI Skills 官方技能包

这是什么

绿袜（GreenSock）官方仓库 greensock/gsap-skills 里的 8 个 AI 技能模块。装上之后，你正在用的 AI 编程工具（Cursor / Claude Code / Codex / Windsurf / Copilot 等）在写 GSAP 动画时会先查官方写法再动手。

以前你让 AI 写滚动动画，它可能凭空编一个不存在的 API，或者给你一段早就废弃的写法。这套技能就是把这个坑填掉。

包含哪 8 个模块

• gsap-core —— 核心 API：gsap.to() / from() / fromTo()、缓动曲线、任意属性动画
• gsap-timeline —— 时间轴：串联、错峰、标签、嵌套
• gsap-scrolltrigger —— 滚动驱动动画、固定（pin）、分步触发
• gsap-plugins —— 插件：SplitText、MorphSVG、Flip、Draggable、ScrollSmoother 等
• gsap-utils —— 工具函数：mapRange()、clamp()、interpolate()、random()
• gsap-react —— React / Next.js 里的 useGSAP() 与自动清理
• gsap-performance —— 性能：will-change、避免布局抖动、批量动画
• gsap-frameworks —— Vue / Nuxt / Svelte 集成写法

适合谁

• 在用 Cursor / Claude Code / Codex 等 AI 编程工具的前端
• 想用 GSAP 做滚动动画、落地页、微交互，但记不住那几百个 API 的人
• 已经被 AI 编造的 GSAP 写法坑过一次的开发者

关于授权与费用

上游仓库采用 MIT 协议，可免费使用、可商用。GSAP 本体自 Webflow 收购之后已经 100% 免费——包括以前要买 Club 会员才能用的 SplitText、MorphSVG，全部并入公开的 gsap npm 包，不需要 .npmrc、不需要私钥、不需要认证 token。

本页为中文整理说明，技能文件版权归 GreenSock 所有。

安装前准备

这套技能用官方 skills 命令行工具安装，只需要 Node.js 18 以上，不需要 npm 账号。

• 打开 nodejs.org，下载 LTS 版本安装
• 装完重开一个终端窗口（很关键，否则 node 命令还是找不到）
• Windows 用 PowerShell 或 CMD，macOS 用「终端」

第 1 步 · 确认环境

node -v && npm -v

能看到两个版本号就说明环境没问题：

第 2 步 · 一行命令安装

先 cd 进你自己的项目根目录，再执行：

npx skills add https://github.com/greensock/gsap-skills --agent claude-code -y

--agent 后面填你实际在用的 AI 工具名：

• claude-code —— Claude Code
• cursor —— Cursor
• codex —— OpenAI Codex
• windsurf —— Windsurf
• github-copilot —— GitHub Copilot
• antigravity —— Google Antigravity

拿不准就不加 --agent，工具会自动探测本机装了哪些 AI 编辑器。

执行过程如下，看到每个模块后面带 ✓ 就是装进去了：

第 3 步 · 验证是否装好

ls .claude/skills/

Windows 下用 dir .claude\skills。能列出 8 个目录就成功了：

技能文件放在项目里的 .claude/skills/ 下，8 个模块合计 1854 行 SKILL.md，体积约 116 KB。

第 4 步 · 真正用起来

不用再做任何配置，AI 工具会自动加载当前项目的技能。直接在对话里提需求就行：

帮我在首页做一个 GSAP 滚动视差效果，往下滚时标题淡出、配图上移

AI 会先去读 gsap-scrolltrigger 技能，再按官方推荐写法给代码，而不是瞎猜 API。

如果换 Cursor，--agent cursor 装完后是同一个道理——技能目录放在 .cursor/ 下，但用法完全一致。

不想敲命令行？

可以直接下载，两种办法任选：

1. 一键安装脚本 —— 下载后双击，脚本自动帮你跑完第 2 步那条命令

2. 技能包源码 —— 解压后把 skills/ 里的 8 个目录手工复制到项目的 .claude/skills/ 下

常见问题

• 提示 npx: command not found —— Node.js 没装好，或者装完没重开终端
• 安装下载卡住不动 —— 网络问题，换个网络或开热点重试
• 装完了 AI 还是不按 GSAP 写 —— 检查技能目录是否在当前项目根目录下；技能是项目级的，不会全局生效
• 想删掉 —— 直接删除 .claude/skills/gsap-* 这 8 个目录即可，无残留