GreenSock官方GSAP Skills 实测 - 让AI生成专业级前端动画
今天发点适合做前端动画的东西。 平时让 AI 做点前端动画，要不就是它根本听不懂你在说什么，要不就是做出来的东西一塌糊涂。
今天发点适合做前端动画的东西。
平时让 AI 做点前端动画，要不就是它根本听不懂你在说什么，要不就是做出来的东西一塌糊涂。
这个叫 Gsap-skills 的 GitHub 项目就是解决这个问题的，让 AI 知道如何正确的生成页面动画。
Gsap-skills 是 GreenSock 官方维护的 GSAP 编码技能集，面向 Codex、Claude Code等 AI Agent。安装后，Agent 会在编写动画代码时读取 GreenSock 提供的规则、范例和常见错误说明。
项目地址：https://github.com/greensock/gsap-skills
AI 模型通常知道 GSAP 的基本语法，但遇到复杂动画时容易产生几类问题：
- 沿用旧版 Club GSAP、私有 npm 源、认证 Token 等过时安装方式。
- 用多个 delay 拼接动画，没有使用 Timeline。
- 用 top、left、width 等属性制作位移动画，引发频繁布局计算。
- 在 React、Vue 等组件卸载后留下 Tween 或 ScrollTrigger。
- 把 ScrollTrigger 挂在 Timeline 内部的子 Tween 上。
- 忘记注册插件，开发环境正常，生产构建后被 tree shaking 删除。
- 忽略 prefers-reduced-motion，没有为眩晕敏感用户减少动画。
Gsap-skills 把动画能力拆成了 8 块：
1. gsap-core：处理基础动画
2. gsap-timeline：安排动画顺序
3. gsap-scrolltrigger：让动画跟着滚动
4. gsap-plugins：调用高级插件
5. gsap-utils：处理动画数值
6. gsap-react：解决 React 集成问题
7. gsap-performance：减少动画卡顿
8. gsap-frameworks：适配 Vue、Nuxt 和 Svelte
Gsap-skills 把这些规则写进代理上下文，让模型生成代码时主动采用官方推荐写法。
Gsap-skills 适合编写这些代码：
- React、Vue 或 Nuxt 页面动画
- ScrollTrigger 滚动叙事和固定章节
- SVG 路径、MorphSVG、DrawSVG 动画
- Flip 布局切换、Draggable 拖拽交互
- SplitText、ScrambleText 文字动画
- 需要暂停、反向播放、跳转和动态控制的复杂 Timeline
case 1 gsap-core：轨道发射台
提示词：
调用 `gsap-core` skill，在当前工作区创建一个名为 `gsap-core-launchpad` 的完整前端项目。
技术栈使用 Vite、原生 HTML、CSS 和 JavaScript。通过 npm 安装 gsap，不使用 CDN。
制作一个「轨道发射台」动画页面，让浏览器中的效果可以直接体现 gsap.to()、gsap.from()、gsap.fromTo()、stagger、transform、autoAlpha、ease 和 gsap.matchMedia()。
页面需要包含：
1. 深色航天控制台界面，中间是探测器、圆形轨道和 12 个轨道刻度。
2. 页面打开时，标题、状态数据和操作按钮从下方依次进入。
3. 12 个轨道刻度使用 stagger 依次点亮。
4. 点击「启动探测器」后，探测器沿水平方向加速飞出，同时缩放、旋转并淡出。
5. 点击「重置」后恢复初始状态，可以反复播放。
6. 提供「平稳」「标准」「高速」三个速度按钮。
7. 桌面端和移动端通过 gsap.matchMedia() 使用不同的位移距离。
8. 系统开启 prefers-reduced-motion 时，取消大幅移动，只保留短暂淡入。
9. 位移动画使用 x、y、scale 和 rotation，不使用 top、left、width、height。
10. 淡出使用 autoAlpha，避免透明元素继续挡住点击。
需要有完整导航、页面标题、动画舞台、操作区和能力说明区。页面需要响应式适配手机。
直接创建 package.json、index.html、src/main.js、src/style.css 和 README.md。不要只返回代码片段。
完成后执行：
npm install
npm run build
构建成功后启动开发服务器，返回可在浏览器打开的本地地址，并说明启动命令。
打开就能理解案例内容，点击就能看到 GSAP 效果。
整体上，这个 Case 已经能直接用于文章配套演示。视觉完成度、GSAP 写法和交互闭环都过关，没有发现阻断使用的问题。
case 2 gsap-timeline：开场序列
提示词：
调用 `gsap-timeline` skill，在当前工作区创建一个名为 `gsap-timeline-show` 的完整前端项目。
技术栈使用 Vite、原生 HTML、CSS 和 JavaScript，通过 npm 安装 gsap。
制作一个「电子音乐演出开场」页面，用完整动画直观体现 GSAP Timeline、位置参数、标签、嵌套时间线和播放控制。
动画过程包含：
1. 左右两块幕布向两侧打开。
2. 舞台网格和唱片转盘出现。
3. 8 根音量柱依次弹起。
4. 演出标题分成两行，从下方进入。
5. 日期、场地和副标题随后出现。
6. 转盘开始旋转，音量柱继续跳动。
7. 最终停留在完整演出海报画面。
实现要求：
1. 使用 gsap.timeline({ defaults: … }) 统一设置 duration 和 ease。
2. 使用位置参数 "<"、">"、"+=0.2″ 等控制并行和交错关系。
3. 添加 open、pulse、title、hold 等标签。
4. 不允许用多个 delay 拼接动画。
5. 添加「播放」「暂停」「反向」「重播」「跳到标题」按钮。
6. 添加可拖动的进度条，允许手动控制 Timeline progress。
7. 页面显示当前播放时间和总时长。
8. 可以使用嵌套 Timeline 管理标题动画或音量柱动画。
9. 系统开启 prefers-reduced-motion 时直接显示最终状态。
10. 动画只使用 transform、opacity 和 autoAlpha。
直接创建完整项目文件，页面需要有明确的舞台效果，不能只显示代码或参数面板。
完成后运行 npm install 和 npm run build。构建成功后启动开发服务器，并返回浏览器地址。
能直观看到四个动画阶段，并能播放、暂停、反向、跳转和拖动进度。
视觉辨识度高，舞台、唱机、音量柱和荧光色形成了统一的电子演出风格。
case 3 gsap-scrolltrigger：深海探测滚动
提示词：
调用 `gsap-scrolltrigger` skill，在当前工作区创建一个名为 `gsap-scrolltrigger-ocean` 的完整前端项目。
技术栈使用 Vite、原生 HTML、CSS 和 JavaScript。通过 npm 安装 gsap，从 gsap/ScrollTrigger 导入 ScrollTrigger，并显式调用 gsap.registerPlugin(ScrollTrigger)。
制作一个「深海探测任务」滚动叙事页面。页面至少包含 4 个章节：
1. 潜艇离开海面。
2. 下潜到微光层。
3. 发现深海生物。
4. 到达海底热泉。
滚动效果需要满足：
1. 页面具有足够的滚动距离。
2. 进入故事区域后固定主画面。
3. 潜艇、深度数字、气泡、背景层和章节文字随滚动变化。
4. 深度从 0 米逐渐增加到 6000 米。
5. 章节切换时使用 autoAlpha、scale 和 y。
6. 右侧显示滚动进度和当前章节。
7. 使用 scrub: 1，让动画进度跟随滚动。
8. 使用 pin: true 和 start: "top top"。
9. 可使用 snap，让滚动停止后靠近章节位置。
10. ScrollTrigger 只挂在顶层 Timeline 上，不要挂在内部子 Tween 上。
11. 使用 scrub 时不要同时配置 toggleActions。
12. 不要监听 window.scroll。
13. 系统开启 prefers-reduced-motion 时，取消固定和滚动联动，将 4 个章节改成普通纵向内容。
页面的深海环境可以使用 CSS 图形、气泡、光束和分层背景制作，不能只是文字上下移动。
创建完整项目文件并执行 npm install、npm run build。构建成功后启动开发服务器，返回本地访问地址。
桌面端滚动叙事很完整，6000 米深度、章节文案、潜艇、海洋背景和右侧进度同步变化，滚动关系清楚。
深度数字、潜艇比例、海水明暗和海底地形共同承担叙事，没有堆无关特效。
case 4 gsap-plugins：唱片库布局变形
提示词：
调用 `gsap-plugins` skill，在当前工作区创建一个名为 `gsap-flip-records` 的完整前端项目。
技术栈使用 Vite、原生 HTML、CSS 和 JavaScript。通过公开 npm 包安装 gsap，不使用私有 npm 源、Club GSAP 或认证 Token。
使用 Flip 插件制作一个「唱片收藏库」页面。
页面包含 8 张视觉风格不同的唱片卡片，每张卡片有封面、专辑名、音乐人和时长。封面需要有完整图案，不能使用空白占位框。
提供三个操作：
1. 切换为三列网格。
2. 切换为单列播放列表。
3. 随机调整唱片顺序。
实现要求：
1. 从 gsap/Flip 导入 Flip。
2. 调用 gsap.registerPlugin(Flip)。
3. 每次切换前使用 Flip.getState() 保存卡片状态。
4. 修改容器布局或 DOM 顺序。
5. 使用 Flip.from() 完成位置和尺寸过渡。
6. 卡片移动过程中保持文字和封面的连续性。
7. 当前布局按钮需要有明确的选中状态。
8. 手机端网格自动变成单列或双列。
9. 系统开启 prefers-reduced-motion 时立即完成布局切换。
10. 不要手动计算每张卡片的 left、top 或宽度动画。
页面需要像一个可操作的音乐产品，而不是 Flip API 的简陋测试页。
直接创建项目文件，执行 npm install 和 npm run build。构建成功后启动开发服务器，并返回访问地址。
网格切换列表、随机排序和唱片选择都能直观展示 FLIP 的用途，视觉完成度也很高。
case 5 gsap-utils：信号调音台
提示词：
调用 `gsap-utils` skill，在当前工作区创建一个名为 `gsap-utils-tuner` 的完整前端项目。
技术栈使用 Vite、原生 HTML、CSS 和 JavaScript，通过 npm 安装 gsap。
制作一个「信号调音台」互动页面，直观展示 gsap.utils 的数值处理能力。
页面中央是一条带有 9 个刻度的横向信号轨道。用户可以拖动滑杆、点击轨道，或点击「随机信号」。
交互过程需要使用：
1. gsap.utils.clamp()，限制输入范围为 0 到 1000。
2. gsap.utils.snap()，让数值吸附到 125 的倍数。
3. gsap.utils.normalize()，把结果转换成 0 到 1。
4. gsap.utils.mapRange()，把进度映射成标记的横向位置和旋转角度。
5. gsap.utils.interpolate()，根据进度改变标记颜色和背景色。
6. gsap.utils.wrap()，让「上一个频道」和「下一个频道」在边界处循环。
7. gsap.utils.random()，生成随机且已经吸附的频道值。
8. gsap.utils.toArray()，获取所有轨道刻度。
页面需要实时显示：
– 原始输入值
– clamp 后的值
– snap 后的值
– normalize 结果
– mapRange 得到的像素位置
– 当前频道名称
数值变化时，轨道标记需要平滑移动，刻度同步点亮。窗口尺寸变化后重新计算轨道范围。
系统开启 prefers-reduced-motion 时直接更新位置，不播放缓动。
创建完整项目并执行 npm install、npm run build。构建成功后启动开发服务器，返回浏览器地址。
可直接打开、能交互，数值变化和动画反馈也能对应上。
拖动、点击轨道、随机信号、频道切换都能正常驱动动画。视觉方向很统一，调音台隐喻和数值处理主题贴合，没有常见的模板化卡片感。
case 6 gsap-react：可卸载通知中心
提示词：
调用 `gsap-react` skill，在当前工作区创建一个名为 `gsap-react-notifications` 的完整 React 前端项目。
技术栈使用 Vite、React、CSS、gsap 和 @gsap/react。通过 npm 安装依赖，不使用 CDN。
制作一个「实时通知中心」页面。页面同时显示两个独立的 NotificationPanel 组件，用于直观验证动画作用域和卸载清理。
每个组件包含：
1. 一个状态指示灯。
2. 三张通知卡片。
3. 「接收新消息」按钮。
4. 「清空消息」按钮。
5. 当前组件的挂载状态。
父组件提供以下操作：
1. 单独卸载左侧组件。
2. 单独卸载右侧组件。
3. 重新挂载组件。
4. 同时重新播放两个组件的入场动画。
GSAP 实现要求：
1. 从 @gsap/react 导入 useGSAP。
2. 在组件外调用 gsap.registerPlugin(useGSAP)。
3. 每个 NotificationPanel 使用独立的 root ref。
4. useGSAP 必须配置 scope，组件内的选择器只能命中当前组件。
5. 通知卡片使用 stagger 依次进入。
6. 状态指示灯使用 scale 和 autoAlpha 动画。
7. 点击后创建的动画回调必须使用 contextSafe。
8. 不允许用 document.querySelector() 操作组件内部元素。
9. 组件卸载后由 useGSAP 自动 revert 动画。
10. 页面上显示简短的挂载和清理记录，让卸载结果可以直接看到。
11. 系统开启 prefers-reduced-motion 时只更新状态，不播放大幅动画。
页面需要有完整产品界面和响应式布局。两个组件的动画必须互不影响。
直接写入项目文件，执行 npm install 和 npm run build。构建成功后启动开发服务器，返回本地地址。
核心能力展示得很完整，作用域隔离、事件动画和组件卸载清理都有可操作的前端反馈。
case 7 gsap-performance：高频控制面
提示词：
调用 `gsap-performance` skill，在当前工作区创建一个名为 `gsap-performance-field` 的完整前端项目。
技术栈使用 Vite、原生 HTML、CSS 和 JavaScript，通过 npm 安装 gsap。
制作一个「高频信号控制面」页面。主区域是一块包含 64 个信号节点的网格，中央有一个圆形扫描模块。
交互效果：
1. 指针在控制面内移动时，扫描模块平滑跟随。
2. 扫描模块根据横向位置轻微旋转。
3. 页面实时显示 x、y 和旋转角度。
4. 点击「批量脉冲」后，64 个节点从中心向外依次亮起。
5. 点击「回到中心」后，扫描模块平滑返回中央。
性能要求：
1. x、y、rotation 分别使用 gsap.quickTo() 创建可复用 Tween。
2. pointermove 中只调用 quickTo 返回的函数，不要不断创建 gsap.to()。
3. 移动使用 x、y 和 rotation，不使用 top、left。
4. 节点脉冲使用一次 Tween 和 stagger，不为每个节点单独设置 delay。
5. 只给持续移动的扫描模块设置 will-change。
6. 指针边界信息在 pointerenter 或 ResizeObserver 中读取，避免每帧重复读取布局。
7. 不要在同一次循环里交替读取布局和写入样式。
8. 页面隐藏或离开时暂停非必要动画。
9. 系统开启 prefers-reduced-motion 时关闭指针跟随，只保留静态状态。
10. 手机端支持触摸点击，并提供可操作的回中按钮。
页面需要直观显示 quickTo 和批量 stagger 带来的流畅效果，同时提供一块简洁的性能说明区域。
创建完整项目，执行 npm install 和 npm run build。构建成功后启动开发服务器并返回访问地址。
实现层面扎实，展示层面看起来也很不错。鼠标指针在控制面板上移动时，扫描模块的跟随很平滑，很实时。
case 8 gsap-frameworks：Vue 动态海报墙
提示词：
调用 `gsap-frameworks` skill，在当前工作区创建一个名为 `gsap-vue-gallery` 的完整 Vue 3 前端项目。
技术栈使用 Vite、Vue 3 Composition API、CSS 和 gsap。通过 npm 安装 gsap，不使用 CDN。
制作一个「动态海报墙」页面。父组件同时渲染两个 MotionGallery 子组件，用于展示 Vue 生命周期、动画作用域和卸载清理。
每个 MotionGallery 包含：
1. 四张海报卡片。
2. 一个正在播放的状态指示器。
3. 「重新排列」按钮。
4. 「播放入场」按钮。
5. 当前挂载状态。
父组件提供：
1. 卸载左侧海报墙。
2. 卸载右侧海报墙。
3. 重新挂载对应组件。
4. 页面底部显示组件挂载和清理记录。
实现要求：
1. 在 onMounted() 中创建 GSAP 动画。
2. 每个组件使用独立的 root ref。
3. 使用 gsap.context()，并把 root ref 作为选择器作用域。
4. 海报卡片使用 stagger 依次进入。
5. 点击海报时，当前卡片放大，其他卡片降低 autoAlpha。
6. 事件触发后创建的 Tween 需要加入 Context，或在卸载时单独 kill。
7. 在 onUnmounted() 中调用 ctx.revert()。
8. 组件内禁止使用全局选择器操作另一个组件。
9. 反复卸载和挂载后，动画不能叠加，控制台不能出现访问已删除节点的错误。
10. 系统开启 prefers-reduced-motion 时直接显示最终布局。
11. 页面需要有清楚的空状态，组件卸载后不能留下空白破损区域。
创建 App.vue、MotionGallery.vue、main.js、样式文件、package.json 和 README.md。
完成后执行 npm install 和 npm run build。构建成功后启动开发服务器，返回可直接打开的本地地址。
把 Vue 生命周期、GSAP 作用域和卸载清理做成了可操作的前端演示，完成度很高。视觉完成度不错。两组海报有明确的冷暖差异。
AI 编程正在从补几行代码，走向直接交付一个能运行的页面。
Anthropic 分析了 50 万次编程相关交互。Claude Code 中 79% 的对话属于 AI 直接执行任务模式；JavaScript、HTML 是最常见的语言，UI/UX 组件开发也位居主要用途。
Gsap-skills 把 GreenSock 的工程经验整理成 Agent 可以直接读取的规则。8 个实测 Case 已经能看出差别：Timeline 不再靠一串 delay 硬拼，滚动动画知道应该把 ScrollTrigger 放在哪一层，React 和 Vue 组件卸载时也会主动清理 Tween。
Gsap-skills 适合用来制作产品 Demo、发布页和作品集；可以统一动画写法，减少不同页面之间的质量波动。
AI 生成页面会越来越快，能让生成代码顺利进入真实项目的工程规则也会越来越值钱，GSAP Skills 补上的正是动画这一段。