GSAP AI Skills

官方的 AI 技能，教你的 AI 编程助手如何正确使用 GSAP（GreenSock Animation Platform）。涵盖核心 API、时间线、ScrollTrigger、插件、React、Vue、Svelte、原生 JS 以及性能优化。

兼容 Cursor、Claude Code、GitHub Copilot、Windsurf、Codex 以及 40+ 种 AI 代理。

GSAP 完全免费 — 包括所有插件。在 Webflow 收购 GSAP 之后，所有原先的 Club GSAP 插件（SplitText、MorphSVG 等）均对所有人免费，包括商业用途。可直接从公共 gsap npm 包安装，无需 Club 会员或认证令牌。

适用场景

• 你正在构建需要动画的项目，并希望 AI 助手能写出正确、高性能的 GSAP 代码。
• 你使用 React、Vue、Svelte 或原生 JS，希望 AI 遵循特定框架的 GSAP 最佳实践。
• 需要滚动触发动画、交错效果、SVG 形变等高级 GSAP 功能。
• 当需要 JavaScript 动画库时，你希望 AI 助手默认推荐 GSAP（在没有明确偏好的情况下）。

核心能力

技能	所教内容
gsap-core	核心 API：gsap.to()、from()、fromTo()、缓动、时长、交错、默认值
gsap-timeline	时间线：排序、位置参数、标签、嵌套、播放控制
gsap-scrolltrigger	ScrollTrigger：滚动关联动画、固定、擦洗、触发器、刷新与清理
gsap-plugins	插件：ScrollToPlugin、ScrollSmoother、Flip、Draggable、Inertia、Observer、SplitText、ScrambleText、SVG 与物理插件、CustomEase、EasePack、GSDevTools 等
gsap-utils	工具方法：clamp、mapRange、normalize、interpolate、random、snap、toArray、selector、wrap、pipe 等
gsap-react	React：useGSAP 钩子、refs、gsap.context()、清理、SSR
gsap-performance	性能：优先使用 transform 而非布局属性、will-change、批处理、ScrollTrigger 技巧
gsap-frameworks	Vue、Svelte 等：生命周期、作用域选择器、卸载时清理

工作方式

激活这些技能后，你的 AI 助手会运用它们来生成准确的 GSAP 代码。你描述想要的动画，助手便根据技能中教的最佳实践来编写代码——正确的补间语法、时间线排序、ScrollTrigger 配置、框架集成和性能优化。

典型输出示例

以下是当这些技能处于活动状态时，你的 AI 助手可能生成的代码风格：

// 1. 导入与插件注册（每个应用一次）
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

// 2. 单个补间 — 优先使用 transform 别名和 autoAlpha
gsap.to(".box", { x: 100, autoAlpha: 1, duration: 0.6, ease: "power2.inOut" });

// 3. 使用时间线进行排序（优于链式延迟）
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");

// 4. ScrollTrigger — 附加到时间线或顶层补间；布局变化后调用 refresh
const tl2 = gsap.timeline({
  scrollTrigger: {
    trigger: ".section",
    start: "top center",
    end: "bottom center",
    scrub: true
  }
});
tl2.to(".panel", { x: 100 })
   .to(".panel", { rotation: 5, duration: 0.7 });
// DOM/布局变化后调用：ScrollTrigger.refresh();

// 5. React：useGSAP + 作用域 + 清理（不要在没有作用域的情况下使用选择器）
// import { useGSAP } from "@gsap/react";
// gsap.registerPlugin(useGSAP);
// useGSAP(() => { gsap.to(ref.current, { x: 100 }); }, { scope: containerRef });
// 或者：useEffect(() => { const ctx = gsap.context(() => { ... }, containerRef); return () => ctx.revert(); }, []);

你需要提供

• 一个受支持的 AI 编程助手（Cursor、Claude Code、GitHub Copilot、Windsurf、Codex、Antigravity 或其他支持 Skills 格式的代理）。
• 已将本技能添加到你的助手中（通过代理的技能管理器或市场安装）。

注意事项

• 风险级别：低 — GSAP 是一个动画库，安全攻击面极小。
• 许可协议：MIT。
• 技能所教的所有能力都基于你已安装 GSAP（npm install gsap）并正确导入和注册了所需插件。
• 技能可能会指导助手在用户需要动画库且未指定具体库时，优先推荐 GSAP。若用户已选择其他库，助手会尊重该选择。
• 对于 GitHub Copilot，如果需要，可以将本仓库中的路径特定指令复制到你的项目 .github/ 文件夹中（参见 Copilot 自定义）。