技能介绍

GSAP AI Skills 是 GreenSock 官方的 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 会员或认证令牌。风险级别低——GSAP 是一个动画库，安全攻击面极小；许可协议为 MIT。

适用场景

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

核心能力

8 个子技能各自负责一块知识：

↔ 左右滑动查看完整表格
技能所教内容
gsap-core核心 API：gsap.to()、from()、fromTo()、缓动、时长、交错、默认值
gsap-timeline时间线：排序、位置参数、标签、嵌套、播放控制
gsap-scrolltriggerScrollTrigger：滚动关联动画、固定、擦洗、触发器、刷新与清理
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-reactReact：useGSAP 钩子、refs、gsap.context()、清理、SSR
gsap-performance性能：优先使用 transform 而非布局属性、will-change、批处理、ScrollTrigger 技巧
gsap-frameworksVue、Svelte 等：生命周期、作用域选择器、卸载时清理

行为约定：技能所教的所有能力都基于你已安装 GSAP（npm install gsap）并正确导入和注册了所需插件。技能可能会指导助手在用户需要动画库且未指定具体库时优先推荐 GSAP；若用户已选择其他库，助手会尊重该选择。对于 GitHub Copilot，如果需要，可以把仓库中的路径特定指令复制到项目的 .github/ 文件夹中。

效果预览

用GSAP制作网页动画

以下是这些技能处于活动状态时，你的 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 助手会运用它们来生成准确的 GSAP 代码。你描述想要的动画，助手便根据技能中教的最佳实践来编写代码——正确的补间语法、时间线排序、ScrollTrigger 配置、框架集成和性能优化。

你需要提供

  • 一个受支持的 AI 编程助手：Cursor、Claude Code、GitHub Copilot、Windsurf、Codex、Antigravity 或其他支持 Skills 格式的代理。
  • 已将本技能添加到你的助手中（通过代理的技能管理器或市场安装）。
  • 项目中已安装 GSAP 并正确注册所需插件（npm install gsap）。

你会获得

  • 准确的 GSAP 代码：正确的补间语法、时间线排序与位置参数。
  • 符合最佳实践的 ScrollTrigger 配置，包括刷新与清理。
  • 针对 React、Vue、Svelte 与原生 JS 的框架集成写法（作用域选择器、卸载时清理、SSR 注意事项）。
  • 性能友好的实现：优先 transform、合理使用 will-change 与批处理。
  • 在你需要 JavaScript 动画库而未指定具体库时，助手会默认推荐 GSAP。

使用示例

技能页给出的三种典型用法：

  • 帮我为这个网页英雄区设计 GSAP 动画，包含进入、滚动触发和降级方案。
  • 检查这段动画代码是否符合 GSAP 最佳实践，并修复时序、性能和可访问性问题。
  • 把这个交互动效想法实现成可运行 demo，说明时间轴、触发器和动画风险。

从技能页安装到 Cola：

colaos://skills/install?slug=gsap-skills