让 AI 不再‘凭感觉’写动画：拆解 GSAP 官方 AI 技能包

whyfail

316人浏览 · 2026-08-11 16:52:17

whyfail · 2026-08-11 16:52:17 发布

动画代码能运行，不等于能上线。真正棘手的问题往往藏在组件卸载、滚动刷新、作用域、性能和无障碍里。

让 AI 写一个淡入动画并不难。输入一句“让卡片依次出现”，几秒钟后就能得到一段 gsap.to()。但项目稍微复杂一点，问题就会接踵而来：选择器误伤其他组件、页面切换后动画仍在运行、ScrollTrigger 定位失效、移动端掉帧，甚至完全忽略 prefers-reduced-motion。

这正是 GSAP AI Skills 想解决的问题。

它不是另一个动画框架，也不负责在浏览器里执行动画。它更像一组写给 AI 编程助手的“官方作业规范”：当 Codex、Cursor、Claude Code、Copilot 等工具准备生成 GSAP 代码时，先按任务加载对应知识，再动手写代码。

一句话说清楚：它到底是什么？

GSAP AI Skills 是 GreenSock 官方维护的一套 Agent Skills。每个技能都是一个相对独立的知识模块，包含触发条件、推荐写法、常见错误、清理方式和参考代码。

传统文档需要开发者主动搜索；AI 技能则把关键规则放进编程助手当前的工作上下文。区别可以理解为：

文档告诉人“应该怎么写”；
AI 技能告诉编程助手“这次生成代码时必须怎么写”；
GSAP 运行库负责“让动画真正跑起来”。

因此，安装技能包并不会增加网站的生产包体积。真正进入前端依赖的仍然是 gsap、@gsap/react 等运行时包。

技能包如何介入 AI 编码？

在这里插入图片描述

假设你向 AI 提出这样的需求：

在 React 中做一个滚动进场动画，移动端要减少动态效果。

编程助手首先识别三个关键信号：React、滚动动画 和 减少动态效果。随后，它可以按需加载：

gsap-react：处理 useGSAP、Ref、作用域、组件卸载和 SSR；
gsap-scrolltrigger：处理触发区间、scrub、pin、刷新和清理；
gsap-performance：约束动画属性与高频更新方式。

这是一种“按需路由”的知识加载方式。它不会机械地把全部资料塞进上下文，而是把与当前任务最相关的规则交给模型。上下文更聚焦，生成结果也更稳定。

值得注意的是，技能包并不替 AI 做产品决策。它不会决定动画应该是克制还是夸张，却能确保一旦决定使用 GSAP，代码尽量符合官方工程模式。

8 个技能模块，各自管什么？

在这里插入图片描述

官方仓库目前将知识拆成 8 个模块：

1. `gsap-core`：动画的基本功

覆盖 gsap.to()、from()、fromTo()、ease、stagger、transform、autoAlpha 和 gsap.matchMedia()。它还会提醒 AI 优先使用 x、y、scale 等 transform 别名，而不是随手动画 left、top。

2. `gsap-timeline`：让多个动作真正“编排”起来

当动画包含多个步骤时，技能会引导 AI 使用 Timeline、position parameter、labels 和嵌套时间线，而不是用一串越来越难维护的 delay。

3. `gsap-scrolltrigger`：把动画连接到滚动

覆盖 trigger、start/end、scrub、pin、refresh 与 cleanup。对于异步内容、字体加载或布局变化，它会提醒在正确时机刷新触发位置。

4. `gsap-plugins`：进入高级交互区

包含 Flip、Draggable、SplitText、MorphSVG、MotionPath、ScrollSmoother、Observer 等插件的注册和使用模式。仓库 README 也特别说明：Webflow 收购 GSAP 后，原 Club GSAP 插件已可从公开的 gsap npm 包安装。

5. `gsap-utils`：别重复造数值处理工具

覆盖 clamp、mapRange、interpolate、random、snap、toArray、wrap 和 pipe。这些工具在拖拽、视差、循环列表和响应式映射中非常实用。

6. `gsap-react`：解决 React 最容易踩的坑

重点是 useGSAP、Ref、scope、contextSafe、自动清理和 SSR。它会阻止 AI 在组件中随意使用无作用域的全局选择器，也会避免在服务端渲染阶段调用浏览器动画 API。

7. `gsap-frameworks`：Vue、Nuxt、Svelte 的生命周期

核心原则很统一：DOM 挂载后创建动画，组件销毁时调用 ctx.revert()，并将选择器限制在组件根节点内。Nuxt 示例还包含插件懒加载模式。

8. `gsap-performance`：让流畅不是一句口号

它会优先建议 transform 和 opacity、使用 quickTo() 处理高频更新、限制同时运行的动画数量，并提醒开发者不要滥用 will-change 或频繁调用 ScrollTrigger.refresh()。

“能跑”与“能上线”，差在哪里？

在这里插入图片描述

没有技能约束时，AI 很容易生成局部正确的代码。例如用 delay 拼接多个动作、直接选择全局 .card，或者移动元素时修改 left 和 top。这些代码可能在演示页面里毫无问题，却会在真实组件树、路由切换和低性能设备上暴露缺陷。

技能增强后的结果通常会多考虑五件事：

编排：多个动作进入 Timeline，而不是各自猜测延迟时间。
作用域：选择器只匹配当前组件，不干扰页面其他实例。
生命周期：组件卸载时回收 Tween、Timeline 和 ScrollTrigger。
性能：优先动画 transform 与 autoAlpha，减少布局和重绘。
无障碍：根据 prefers-reduced-motion 减少或跳过强动画。

这几项看起来不如“炫酷效果”抢眼，却决定了动画代码能否长期留在生产项目中。

一个更接近生产环境的 React 示例

先安装运行时依赖：

npm install gsap @gsap/react

然后在组件中使用带作用域和清理能力的写法：

import { useRef } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { useGSAP } from "@gsap/react";

gsap.registerPlugin(ScrollTrigger, useGSAP);

export function FeatureSection() {
  const container = useRef(null);

  useGSAP(() => {
    const mm = gsap.matchMedia();

    mm.add("(prefers-reduced-motion: no-preference)", () => {
      gsap.timeline({
        scrollTrigger: {
          trigger: ".feature-section",
          start: "top 72%"
        }
      })
        .from(".feature-title", {
          y: 24,
          autoAlpha: 0,
          duration: 0.6
        })
        .from(".feature-card", {
          y: 20,
          autoAlpha: 0,
          stagger: 0.08,
          duration: 0.45
        }, "-=0.25");
    });

    mm.add("(prefers-reduced-motion: reduce)", () => {
      gsap.set([".feature-title", ".feature-card"], {
        autoAlpha: 1
      });
    });

    return () => mm.revert();
  }, { scope: container });

  return (
    <section ref={container} className="feature-section">
      <h2 className="feature-title">更可靠的动画代码</h2>
      <div className="feature-card">Card A</div>
      <div className="feature-card">Card B</div>
    </section>
  );
}

这段代码并不复杂，但它包含了几个关键工程信号：

插件在模块层注册一次；
useGSAP 确保代码只在客户端生命周期中执行；
scope: container 将字符串选择器限制在当前组件；
Timeline 管理动作顺序；
y 和 autoAlpha 避免不必要的布局开销；
matchMedia 尊重用户的减少动态效果偏好；
mm.revert() 在组件卸载时回收媒体查询上下文。

这就是 AI 技能包的实际价值：不是把简单代码变复杂，而是把原本容易遗漏的工程条件提前带进生成过程。

如何安装？

官方推荐使用 Skills CLI：

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

CLI 会自动识别 Codex、Cursor、Claude Code、Windsurf、Copilot 等支持的编程助手。也可以通过 --agent 显式指定目标工具：

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

对于 OpenAI Codex，也可以手动将仓库中的技能目录放入 ~/.codex/skills/。仓库还准备了 GitHub Copilot 指令、Cursor 插件配置、Claude Code 插件配置，以及 Vanilla JavaScript、React、Vue 和 Nuxt 的最小示例。

安装之后，怎样提问效果更好？

技能包能提高专业性，但清晰的需求仍然重要。与其只说“做个高级动画”，不如提供以下信息：

在 React 商品列表中使用 GSAP 实现滚动进场：
- 标题先出现，卡片随后 stagger
- 只播放一次
- 作用域限制在当前组件
- 支持 prefers-reduced-motion
- 组件卸载时清理 ScrollTrigger
- 优先使用 transform，避免 left/top

这样的提示词同时说明了视觉顺序、运行环境和工程约束。AI 可以更准确地路由到 Timeline、React、ScrollTrigger 和 Performance 技能。