GSAP | 资讯狗 | Zixungou

GSAP（GreenSock Animation Platform）是一个跨浏览器、跨框架的 JavaScript 动画库，官方定位原文是「the JavaScript animation library for the modern web」。已经被超过 1200 万个网站使用，在业界是做高级 web 动画的事实标准之一。

在 Vibe Coding 做落地页、营销站、产品主页的场景里，AI 生成的动画往往只用到 CSS transition，效果单调重复。而设计感强的网页离不开滚动触发、时间线编排、路径动画、文字切分这些能力。让 AI 在动画部分明确指定用 GSAP，比让它从零自己写动画质感高很多——训练数据里 GSAP 示例量很大，AI 对它的掌握非常成熟，产出的代码基本上可以直接跑。

核心能力

基础动画


js
gsap.to(".box", { x: 100, duration: 1, ease: "power2.out" });
gsap.from(".title", { opacity: 0, y: 50, duration: 0.8 });

Timeline（时间线编排）

把多个动画按顺序或并行组织起来，这是 GSAP 相对其他动画库最明显的优势：


js
const tl = gsap.timeline();
tl.from(".hero-title", { y: 100, opacity: 0 })
  .from(".hero-sub", { y: 50, opacity: 0 }, "-=0.4")
  .from(".hero-cta", { scale: 0.8, opacity: 0 }, "-=0.2");

ScrollTrigger（滚动触发）

现代营销站几乎都在用的插件：


js
gsap.registerPlugin(ScrollTrigger);
gsap.to(".card", {
  y: -100,
  scrollTrigger: {
    trigger: ".section",
    start: "top center",
    end: "bottom center",
    scrub: true,
  },
});

常用插件

ScrollSmoother：平滑滚动
Draggable：拖拽交互
Flip：任意两个状态之间的过渡
MotionPathPlugin：路径动画
MorphSVGPlugin：SVG 路径形变
SplitText：把文字拆成字符 / 单词 / 行
Observer：高级输入事件

框架集成

React：@gsap/react 提供 useGSAP() hook，自动处理动画清理
Vue：直接 import 即可，原生兼容
原生 / 其他框架：不绑定任何框架，任何地方都能用

在 Vibe Coding 里的典型用法

写 prompt 时直接指定：

用 GSAP + ScrollTrigger 做滚动触发的 hero section，标题用 SplitText 逐字出现，背景图做 parallax 滚动

或者：

用 GSAP Timeline 做一个 3 步的产品特性展示，每步停留 1.5s，带淡入和上移，最后停在第三步

AI 生成的结果通常可以直接复制进项目跑通。配合 ScrollTrigger 和 SplitText，落地页的质感能做到和设计稿接近。

适用场景

做落地页、产品主页、营销站，需要高级动画
已经用 Framer Motion 但复杂时间线编排不够用
需要滚动触发、路径、SVG morph、文字切分等高级能力
需要跨浏览器兼容的生产级动画方案

不适用的情况

只需要简单 hover 和过渡，CSS transition 就够了
项目对包体积极度敏感（核心库约 20kb gzip）
项目已用 Framer Motion 或 Motion.dev 且没有明显缺口

安装


bash
npm install gsap

React 集成：


bash
npm install gsap @gsap/react

CDN：


html
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>

License 说明

GSAP 使用 GreenSock 的「No Charge」标准许可，核心库和大部分插件免费用于商业项目。2024 年 Webflow 收购 GreenSock 后，原本需要 Club GreenSock 会员才能用的高级插件（SplitText、MorphSVG、ScrollSmoother 等）也对所有人免费开放。具体条款见 https://gsap.com/standard-license。