用GSAP制作网页动画

gsap-skills

GSAP动画官方AI Skill，ScrollTrigger/Flip/SplitText

GreenSock（官方）

设计师 / 开发者

图片设计编程开发官方官方

GitHub Stars9.1K

试试这样做

帮我为这个网页英雄区设计 GSAP 动画，包含进入、滚动触发和降级方案。

检查这段动画代码是否符合 GSAP 最佳实践，并修复时序、性能和可访问性问题。

把这个交互动效想法实现成可运行 demo，说明时间轴、触发器和动画风险。

详细介绍

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 自定义）。