GSAP AI Skills 动画技能

GSAP 官方 AI 技能包，教 AI 编码助手正确使用 GSAP 动画库。

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

这是什么

GSAP AI Skills 是 GreenSock 官方发布的 AI 技能包，教 AI 编码助手（Claude Code、Cursor、Copilot、Codex 等 40+ 工具）正确使用 GSAP 动画库。

安装后，AI 助手在写动画代码时会自动参考 GSAP 最佳实践，避免常见的错误用法。

GSAP 现在 100% 免费，包括所有插件（SplitText、MorphSVG 等），无需会员，直接从 npm 公开安装。

主要功能

• gsap-core：核心 API（to/from/fromTo、缓动、时长、交错、默认值）
• gsap-timeline：时间线（序列、位置参数、标签、嵌套、播放控制）
• gsap-scrolltrigger：滚动驱动动画（固定、擦除、触发、刷新与清理）
• gsap-plugins：插件合集（ScrollTo、Flip、Draggable、SplitText、物理引擎等）
• gsap-react：React 集成（useGSAP hook、refs、context、SSR、清理）
• gsap-frameworks：Vue、Svelte 等框架的生命周期和清理
• gsap-performance：性能优化（transform 优先、will-change、批处理）
• gsap-utils：工具函数（clamp、mapRange、snap、random 等）

安装

npx skills（推荐，支持 40+ 工具）

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

自动检测已安装的 AI 工具。指定工具：

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

Claude Code

/plugin marketplace add greensock/gsap-skills

手动安装

将 skills/ 目录复制到对应工具的技能目录：

使用示例

安装后，直接在 AI 助手对话中描述动画需求，它会自动参考 GSAP 技能生成正确代码。

单个补间动画

帮我用 GSAP 实现一个元素从左侧滑入的动画

AI 会生成：

import { gsap } from "gsap";

gsap.to(".box", { x: 100, autoAlpha: 1, duration: 0.6, ease: "power2.inOut" });

时间线序列

用 GSAP 时间线实现三个元素依次出现

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");

滚动驱动动画

用 ScrollTrigger 实现页面滚动时元素跟随移动

import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

gsap.to(".panel", {
  x: 100,
  scrollTrigger: {
    trigger: ".section",
    start: "top center",
    end: "bottom center",
    scrub: true
  }
});

React 中使用

在 React 组件里用 GSAP 实现入场动画

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

gsap.registerPlugin(useGSAP);

function App() {
  const containerRef = useRef(null);
  useGSAP(() => {
    gsap.to(".box", { x: 100, duration: 0.5 });
  }, { scope: containerRef });

  return <div ref={containerRef}><div className="box" /></div>;
}