GSAP Skills

GSAP · GreenSock Animation Platform

让 AI 写出
正确的动画代码

GSAP 官方 AI Skills 库：核心 API、时间线、滚动触发与插件的最佳实践。把经官方验证的用法教给任何编码代理——Claude、Cursor、Copilot，以及 40+ 智能体。

8
官方技能
40+
兼容智能体
MIT
开源许可
100%
全部插件免费
Skills

八项官方技能

由 GreenSock 团队维护的 Agent Skills，按 Agent Skills 标准编写，覆盖从单次补间到插件生态的全部官方最佳实践。

01

gsap-core

核心 API：to / from / fromTo、缓动、时长、stagger、defaults 与 matchMedia 响应式动画。

tweeneasingmatchMedia
02

gsap-timeline

时间线：序列编排、position 参数、标签、嵌套与播放控制，替代链式 delay 的官方做法。

sequencinglabels
03

gsap-scrolltrigger

滚动触发：滚动联动、pin 固定、scrub 跟手、batch 批量入场与刷新清理。

scrollpinscrub
04

gsap-plugins

插件生态：ScrollTo、ScrollSmoother、Flip、Draggable、SplitText、CustomEase 等全部免费。

flipdraggablesplittext
05

gsap-utils

工具函数：clamp、mapRange、normalize、interpolate、random、snap、wrap 等计算辅助。

clampmapRangerandom
06

gsap-react

React 集成：useGSAP 钩子、ref 作用域、gsap.context 清理与 SSR 处理。

useGSAPcleanupSSR
07

gsap-performance

性能指南：优先 transform 属性、will-change 使用时机、批量处理与 ScrollTrigger 提示。

transformbatched
08

gsap-frameworks

框架支持：Vue、Svelte 等框架的生命周期、选择器作用域与卸载清理。

vuesveltelifecycle
查看八项技能详解与更多样例 →
Live Lab

现场演示

四个实验均由本页真实运行的 GSAP 驱动——前三个点击「重播」观看，第四个随页面滚动联动。代码即官方推荐写法。

01 · TWEEN

基础补间

gsap.to() 从当前位置补间到目标状态，优先使用 transform 别名与内置缓动。

gsap.to(box, {
  x: 170, rotation: 360,
  duration: 0.8, ease: "power2.inOut"
});
时长 0.8s · power2.inOut
02 · STAGGER

交错波浪

stagger 让同一补间按固定间隔错开，back.out 带来回弹收尾。

gsap.to(items, {
  y: -36, stagger: 0.08,
  ease: "back.out(1.7)", duration: 0.5
});
间隔 0.08s · 从中心交错
03 · TIMELINE

时间线序列

时间线按顺序编排多步动作，比链式 delay 更精确、可整体控制。

const tl = gsap.timeline({ defaults: { duration: 0.5 } });
tl.to(box, { x: 170, duration: 0.7 })
  .to(box, { backgroundColor: "#0AE448" })
  .to(box, { scale: 0.55 }, "+=0.1");
三步串联 · 共享默认值
04 · SCROLLTRIGGER

滚动联动（scrub）

动画进度与滚动位置一一对应——继续向下滚动，旋钮沿轨道移动并填充进度。

gsap.to(knob, {
  x: () => trackWidth, ease: "none",
  scrollTrigger: {
    trigger: stage, start: "top 75%",
    end: "bottom 55%", scrub: 1
  }
});
scrub: 1 · 跟随滚动
Install

装进你的编码代理

三种方式任选其一，技能即装即用。详细对照表见仓库内 README。

npx skills（推荐）

自动识别当前代理并安装，兼容 Cursor、Claude Code、Codex、Windsurf、Copilot 等 40+ 工具。

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

Claude Code

通过插件市场直接添加官方插件，或克隆后复制 skills/ 目录到 ~/.claude/skills/。

/plugin marketplace add greensock/gsap-skills

Cursor

Settings → Rules → Add Rule → Remote Rule (Github)，填入仓库名即可。

greensock/gsap-skills