GSAP 动画实战系列——从入门到 AI 可视化

GSAP 动画实战系列 系列总览（本文） | G1 Tween & Timeline 核心 | G2 ScrollTrigger 滚动动画 | G3 文本动画 | G4 SVG 动画 | G5 GSAP + React | G6 AI 项目实战 | G7 社区案例精选

为什么是 GSAP

GSAP（GreenSock Animation Platform）诞生于 2006 年，但真正的爆发是从 v3（2019 年）开始的。它不是 CSS Animation 的替代品，而是更上一层楼的生产力工具。

GSAP 不是"又一个动画库"——它是 Web 动画的工业标准。Adobe、Apple、Google、Nike、Airbnb 都在用它。原因很简单：控制力。你可以精确控制每一帧、每一个属性的变化曲线，还能把多个动画编组成复杂的叙事序列。

本系列讲什么

这是一套面向实际工程的 GSAP 教程。不追求面面俱到的 API 列表（官网 docs 已经做得很好），而是聚焦怎么用、什么时候用、踩过哪些坑。

七篇文章，四个维度：

1. 核心 API（G1）——Tween、Timeline、Eases、Staggers。这是其他一切的基础。
2. 插件实战（G2-G4）——ScrollTrigger、SplitText、DrawSVG、MorphSVG，每个都是独立的技术路线。
3. 框架集成（G5）——React 里的 GSAP 怎么用，context 怎么管理，内存泄漏怎么防。
4. 行业应用（G6-G7）——AI 项目中用 GSAP 做动态展示，以及社区里那些值得复用的生产级模式。

资源索引

写这个系列时参考的核心资源：

• gsap.com/docs/v3——官方文档，API 最权威的来源
• gsap.com/showcase——官方案例展示
• gsapify.com/gsap-examples——20+ 实战动画模式，复制即用
• github.com/iotron/gsap-cookbook——GSAP 动画菜谱，涵盖 Scroll、Text、SVG、Cursor、Canvas、视觉效果
• github.com/greensock/gsap-skills——官方 AI 技能包，教 AI 工具正确使用 GSAP
• github.com/su69ar/rdnax-gsap-master——全面的 GSAP AI Skill，覆盖核心 API、插件、React/Next.js、性能优化
• GSAP 社区论坛——大量真实问题与解答
• GSAP Discord——活跃的开发者社区

安装与起步

CDN（最快）

<!-- 核心库 -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<!-- ScrollTrigger（最常用插件） -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/ScrollTrigger.min.js"></script>

npm

npm install gsap

import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'

// 注册插件（必须）
gsap.registerPlugin(ScrollTrigger)

GSAP 的许可

GSAP 核心库及所有插件（包括 SplitText、DrawSVG、MorphSVG、CustomEase、Physics2D 等）自 2025 年 Webflow 收购 GSAP 后已全部免费，包括商业用途。不再需要 Club 会员、npm token 或私有 registry。直接从 npm 公共 registry 安装即可。

一个直观的对比

🗺️ 完整 GSAP 视觉演示索引 → CodePen 合集

CSS 方式实现一个淡入+上移：

.box {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 0.6s ease-out forwards;
}
@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

GSAP 方式：

gsap.from('.box', { opacity: 0, y: 30, duration: 0.6, ease: 'power2.out' })

区别在哪？单看这段差不多。但当你要：

• 5 个元素依次出现（stagger）→ CSS 需要算 delay，GSAP 一个 stagger: 0.1 搞定
• 中途暂停/反转/变速 → CSS 几乎做不到，GSAP tl.pause() / tl.reverse() 一行
• 动画 A 结束后触发动画 B → CSS 靠 setTimeout，GSAP 靠 Timeline

GSAP 的设计哲学是把动画当作可编程的对象，而不是 CSS 的属性声明。这在复杂交互中会变得越来越重要。

系列进度

下一篇：G1 Tween & Timeline 核心——GSAP 动画的基石

实操清单

• 打开 gsap.com/docs/v3 浏览 API 文档结构，了解各模块分布
• 通过 CDN 方式在本地 HTML 文件引入 GSAP 核心库和 ScrollTrigger 插件
• 通过 npm install gsap 在项目中安装 GSAP，并完成 import + registerPlugin
• 用 gsap.from('.box', { opacity: 0, y: 30, duration: 0.6, ease: 'power2.out' }) 实现一个淡入上移效果，与 CSS keyframes 版本对比
• 尝试对 5 个同类元素加 stagger: 0.1，体验与 CSS animation-delay 写法的差异
• 用 tl.pause() 和 tl.reverse() 验证 Timeline 的可编程控制能力
• 浏览 gsapify.com/gsap-examples 挑选 2~3 个动画模式，理解其用到了哪篇文章的知识点
• 克隆或浏览 gsap-cookbook，按 Scroll、Text、SVG 分类标记自己最感兴趣的章节
• 对照系列进度表（G1~G7），按顺序规划自己的学习路径