前言：为什么写这本书

动画，是 Web 体验的灵魂

动画能提示状态、解释空间关系、引导阅读，也可能让页面分散注意力。学习动画工具的目标是把变化讲清楚，并让交互保持可用。

GSAP 提供对象补间、时间线和插件，适合需要精确编排、滚动联动和 SVG 处理的场景。简单的悬停过渡也可以用 CSS；Web Animations API、Anime.js 和 Motion 各有适用场景。Anime.js 仍在维护，不能以“其他工具停更”作为选择 GSAP 的理由。

本书使用 GSAP 3.13。它通过浏览器帧循环更新属性，帧率受到布局、绘制、脚本、设备和刷新率影响，不保证 60fps，也不保证总比 CSS 动画快。后面的性能附录会介绍如何在真实设备上测量。

阅读交互版时，先预测结果，再开启演示、拖动进度、修改一个参数。演示默认不自动播放；代码窗口显示实验当前参数，正文中的完整示例则用于迁移到自己的页面。

这本书的定位

市面上的 GSAP 中文资料，大多是这样的状态：博客文章东一篇西一篇，翻译文档看着像机器翻的，碎片化、缺深度、没有系统脉络。英文官方文档倒是全面，但对中文开发者来说，啃起来确实有门槛。

《从补间到叙事：GSAP 动画实战》 想做的，就是把这块拼图补上。

本书沿着“补间 → 编排 → 交互 → 叙事”的路径组织内容，采用以下学习方式：

• 代码先行：每个知识点先甩你一段能跑的代码，跑起来了再聊原理
• 对比驱动：CSS 做不到的，GSAP 怎么做；JS 手写时痛得死去活来的，GSAP 怎么一键搞定
• 避坑指南：每章末尾的"常见陷阱"，都是作者实打实踩过的坑，帮你少走弯路
• 实战导向：第三部分 5 个完整项目，从需求分析到最终代码，手把手带你做完

适合谁读

这本书写给这样的你：

• 有点 HTML/CSS/JS 基础的前端开发者
• 想系统学 Web 动画，但还没摸到门道
• 用过 GSAP，但只会 gsap.to()，想搞懂 Timeline 和那些插件到底怎么用
• 手头有项目，需要落地一些像样的动画效果

你不需要是动画专家，不需要懂数学曲线，甚至从没碰过任何动画库也没关系。这本书会从零开始，带你一步步走到能独立做出复杂动画的程度。

不太适合谁读

• 完全没写过 JavaScript 的朋友，建议先补一补 JS 基础，不然代码示例会看得比较吃力
• 只想做简单 CSS 过渡的开发者，GSAP 对你来说可能有点"杀鸡用牛刀"
• 专门研究动画理论的研究者，本书偏实战，理论推导不是重点

这些不是在"劝退"，只是帮你判断这本书能不能帮到你。如果你不在上面这几类里，那就放心往下读吧。

书的结构

建议阅读路径：

• 快速入门：读第 1-4 章，基本够你应付日常需求了
• 项目实战：读第 5-6 章（ScrollTrigger 是最高频的插件，强烈推荐先学），然后直接跳到第 10-14 章选一个项目动手
• 全面精通：从头到尾读完，附录常备手边当工具书

GSAP 版本说明

本书以 GSAP 3.13 为示例版本基线。核心 API 使用 GSAP 3.x 写法，但新增插件功能不能一概视为兼容全部 3.x 版本。GSAP 2.x 的 API 有较大差异（如 TweenLite/TweenMax 已合并为 gsap），本书不再覆盖 2.x 内容。

GSAP 3.13 起，全部插件免费，包括商业使用，也不再需要 Club GSAP 订阅或私有 npm 仓库。请通过公开的 gsap 包安装，并遵循官方标准许可。详见 GSAP 3.13 发布说明和 官方安装文档。

如果你项目还在用 2.x，建议尽快升级，3.x 的 API 更简洁、性能更好、插件体系更统一。

约定与符号

书中使用以下约定：

• 🟢 推荐做法：绿色标记，值得采纳
• 🔴 避坑警告：红色标记，常见错误
• 🔵 性能提示：蓝色标记，性能相关
• 代码块：可运行的示例代码
• 关键术语：首次出现时加粗并解释

致谢

感谢 GreenSock 团队创造了这个伟大的动画平台，并持续维护 20+ 年。

感谢所有在 GitHub、CodePen、掘金上分享 GSAP 实战经验的开发者，你们的案例是这本书的灵感来源。

感谢"锋利的 jQuery"系列开创的技术书籍风格，直击要害、拒绝废话，这个理念在本书中延续。

---

让我们开始吧。

下一章，从理解"为什么选择 GSAP"开始。