GreenSock官方GSAP Skills 实测 – 让AI生成专业级前端动画

今天来分享一些能让前端动画效果更出色的内容。

以往让人工智能（AI）来构建前端动画，常常会遇到要么它完全摸不着头脑，要么就是产出的效果惨不忍睹的情况。

这款名为 Gsap-skills 的 GitHub 项目，正是为了解决这一痛点而生，它致力于教会 AI 如何更精准地生成页面动画。

01. 项目概览

Gsap-skills 是 GreenSock 官方精心打造的一套 GSAP 编码技能集，专为 Codex、Claude Code 等 AI Agent 量身定制。安装此项目后，AI Agent 在编写动画代码时，便能依据 GreenSock 提供的规范、示范示例以及常见错误解析来指导其创作。

项目地址：https://github.com/greensock/gsap-skills

AI 模型通常掌握 GSAP 的基础语法，但在面对复杂动画时，容易陷入几类误区：

• 沿用过时的安装方式，例如旧版 Club GSAP、私有 npm 源或认证 Token。
• 未能充分利用 Timeline，而是通过堆叠多个 delay 来拼接动画。
• 使用 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 动画。

02. 项目实测

案例 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. 一个深邃的太空控制台界面，是探测器模型，周围环绕着圆形轨道和十二个轨道刻度。

2. 页面加载时，标题、状态数据以及操作按钮应从下方依次出现。

3. 十二个轨道刻度应以 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 动画效果。

总体而言，这个案例已经能够直接用于文章配套的演示。其视觉完成度、GSAP 的编码规范以及交互的完整闭环都表现出色，未发现阻碍使用的明显问题。

案例 2：gsap-timeline – 开场序列

提示词：

调用 `gsap-timeline` skill，在当前工作区创建一个名为 `gsap-timeline-show` 的完整前端项目。

技术栈采用 Vite，配合原生 HTML、CSS 和 JavaScript。通过 npm 安装 gsap。

设计一个「电子音乐演出开场」动画页面，要求通过生动的动画直观展示 GSAP Timeline、位置参数、标签、嵌套时间线以及播放控制功能。

动画过程需包含：

1. 左右两扇幕布徐徐向两侧拉开。

2. 舞台上的网格和唱片转盘逐渐显现。

3. 八根音量柱依次向上弹起。

4. 演出标题分成两行，从下方缓缓进入画面。

5. 日期、场地信息和副标题随后依次出现。

6. 转盘开始旋转，音量柱持续律动。

7. 最终画面定格为完整的演出海报。

实现要求：

1. 使用 `gsap.timeline({ defaults: … })` 来统一设定动画的时长和缓动效果。

2. 利用位置参数如 `””`,`”+=0.2″` 等来控制动画的并行、交错以及相对时间关系。

3. 添加 `open`、`pulse`、`title`、`hold` 等动画标签。

4. 严禁使用多个 delay 来拼接动画，必须依赖 Timeline 的时序控制。

5. 添加「播放」、「暂停」、「反向」、「重播」、「跳至标题」等控制按钮。

6. 集成一个可拖动的进度条，允许用户手动控制 Timeline 的播放进度。

7. 页面需实时显示当前播放时间和总时长。

8. 可通过嵌套 Timeline 来管理标题动画或音量柱的动画序列。

9. 当系统启用 prefers-reduced-motion 时，页面应直接显示最终状态，跳过动画。

10. 动画效果仅使用 transform、opacity 和 autoAlpha 属性。

直接生成完整的项目文件，页面需呈现出清晰的舞台效果，避免仅展示代码或参数面板。

完成后运行 `npm install` 和 `npm run build`。构建成功后启动开发服务器，并返回浏览器访问地址。

能够直观地看到四个动画阶段的演变，并且可以进行播放、暂停、反向、跳转以及拖动进度条等操作。
视觉辨识度高，舞台、唱机、音量柱以及荧光色调共同营造出统一的电子演出风格。

案例 3：gsap-scrolltrigger – 深海探测滚动

提示词：

调用 `gsap-scrolltrigger` skill，在当前工作区创建一个名为 `gsap-scrolltrigger-ocean` 的完整前端项目。

技术栈采用 Vite，配合原生 HTML、CSS 和 JavaScript。通过 npm 安装 gsap，从 `gsap/ScrollTrigger` 导入 ScrollTrigger，并显式调用 `gsap.registerPlugin(ScrollTrigger)`。

设计一个「深海探测任务」滚动叙事页面，页面至少包含四个章节：

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 时，取消固定效果和滚动联动，将四个章节改为普通的纵向内容展示。

页面的深海环境可以通过 CSS 图形、气泡、光束和分层背景来构建，而非仅仅依靠文字的上下移动。

直接生成完整的项目文件，并执行 `npm install` 和 `npm run build`。构建成功后启动开发服务器，并返回本地访问地址。

在桌面端实现的滚动叙事效果非常完整，6000 米的深度变化、章节文案的呈现、潜艇的动态、海洋背景的变换以及右侧进度的同步更新，都清晰地展现了滚动与动画的关系。

深度数字的精准变化、潜艇的比例调整、海水的明暗过渡以及海底地形的描绘，共同承担了叙事功能，避免了不必要的特效堆砌。

案例 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 插件的应用价值，其视觉完成度也相当高。

案例 5：gsap-utils – 信号调音台

提示词：

调用 `gsap-utils` skill，在当前工作区创建一个名为 `gsap-utils-tuner` 的完整前端项目。

技术栈采用 Vite，配合原生 HTML、CSS 和 JavaScript。通过 npm 安装 gsap。

设计一个「信号调音台」互动页面，用以直观展示 `gsap.utils` 在数值处理方面的强大能力。

页面的是一条带有九个刻度的横向信号轨道。用户可以通过拖动滑杆、点击轨道，或者点击「随机信号」按钮来与之互动。

交互过程需运用以下工具：

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`。构建成功后启动开发服务器，并返回浏览器访问地址。

可直接打开并进行交互操作，数值的变化与动画反馈能够准确对应。

拖动、点击轨道、随机信号以及频道切换等操作均能有效地驱动动画。整体视觉风格统一，调音台的隐喻与数值处理的主题完美契合，避免了常见的模板化卡片式设计。

案例 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` Hook。

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`。构建成功后启动开发服务器，并返回本地访问地址。

核心功能展示得非常全面，作用域隔离、驱动动画以及组件卸载清理都得到了可操作的前端反馈。

案例 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`。构建成功后启动开发服务器，并返回访问地址。

在实现层面非常扎实，同时展示效果也令人印象深刻。当鼠标指针在控制面板上移动时，扫描模块的跟随效果非常平滑且实时。

案例 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 的作用域管理以及卸载清理机制有机地结合，形成了一个可操作的前端演示，完成度非常高。视觉效果也令人满意，两组海报展示了明确的冷暖色调差异。

03. 深度探索

AI 编程的能力正从辅助编写几行代码，逐步发展到能够直接交付可运行的完整页面。

Anthropic 对超过 50 万次编程相关交互的分析显示，在 Claude Code 的对话中，有 79% 属于 AI 直接执行任务的模式；JavaScript 和 HTML 是最常被使用的语言，而 UI/UX 组件的开发也占据了主要用途的相当一部分。

Gsap-skills 巧妙地将 GreenSock 在工程实践中的宝贵经验，提炼成 AI Agent 能够直接理解和遵循的规则。</通过对 8 个实际案例的测试，我们可以清晰地看到其带来的显著差异：Timeline 不再依赖生硬的 delay 堆砌，滚动动画能够正确地将 ScrollTrigger 放置在合适的层级，而在 React 和 Vue 组件卸载时，Tween 动画也能被主动地清理。

Gsap-skills 非常适合用于构建产品演示、发布页面以及个人作品集；它能够帮助统一不同页面间的动画编写风格，从而有效减少页面质量的波动。

AI 生成页面的速度将日益加快，而那些能够确保生成代码顺利融入真实项目工程规范的能力，其价值也将日益凸显。Gsap-skills 正是弥补了动画这一关键环节的不足。