GSAP 入门：现代 Web 动画引擎完全指南

📌 GSAP 是网页动画领域事实上的标准库，如今已对所有人免费开放（由 Webflow 赞助）。无论你做落地页、产品官网还是个人作品集，掌握 GSAP 都能让页面质感拉开一个档次。这篇从零带你入门。

一、GSAP 是什么，为什么它值得学

GSAP（GreenSock Animation Platform）是 JavaScript 动画库，2006 年诞生，服务过 Google、Apple、Samsung 等大量一线产品的网页。前端圈有一句话：CSS 动画能做 80% 的动效，剩下 20% 的「高级感」全靠 GSAP。

它的核心能力是「Animate Anything」：几乎任何属性都能动画——CSS 属性、SVG、canvas、DOM 的任意属性，甚至对象里的数值。配合性能优化（GPU 加速、时间线控制），能做出流畅的复杂动效。

免费化是大事：GSAP 历史上核心库免费、部分插件收费。2024 年起 GSAP 宣布对所有人完全免费，由 Webflow 赞助。这意味着 ScrollTrigger 等过去的高级插件，现在个人和商用都能随便用。

二、核心概念：Tween 与 Timeline

GSAP 只有两个核心概念，理解它们就理解了 80% 的 API：

Tween（补间）：让某个对象的某个属性，在一段时间内从 A 变到 B。

1
2

// 让 .box 元素在 1 秒内向右移动 300px
gsap.to(".box", { x: 300, duration: 1, ease: "power2.out" });

Timeline（时间线）：把多个 Tween 按顺序排列，精确控制播放节奏——哪个先动、哪个等多久、是否重叠。

1
2
3
4

const tl = gsap.timeline();
tl.to(".title", { opacity: 1, duration: 0.5 })
  .to(".subtitle", { opacity: 1, duration: 0.5 }, "-=0.2")
  .to(".cta", { scale: 1, duration: 0.3 });

Timeline 是 GSAP 区别于其他动画库的核心优势：复杂动画的「编排」能力，让代码可读、可维护、可控。

三、王牌插件：ScrollTrigger 与伙伴们

免费化之后，GSAP 的插件全家桶全部开放，其中三个最值得掌握：

ScrollTrigger（滚动触发）：页面滚动到某位置时触发动画——产品页常见的「滚动中元素渐入、图片视差、文字逐段浮现」都是它的功劳。它是现代营销页的标配。

SplitText（文字拆分）：把文字拆成单个字符/词/行，配合动画做逐字浮现、文字炸裂效果，是高级排版动效的核心工具。

Flip / Draggable / MorphSVG：Flip 做布局变化动画（列表重排、元素移动），Draggable 做拖拽交互，MorphSVG 做 SVG 形状变形。加上 ScrollSmoother（滚动平滑），基本覆盖了你能想到的所有网页动效需求。

四、接入方式：CDN 与 React

CDN 最快接入：在页面引入即可使用核心库。

1

<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>

需要 ScrollTrigger 时再引一个插件文件。文档当前版本为 v3.15（v2 已归档），API 保持稳定。

React 项目：官方提供 useGSAP() Hook，解决了 React 严格模式下动画重复执行的问题，配合 gsap.context 自动清理。

1
2
3

useGSAP(() => {
  gsap.to(".box", { x: 100 });
}, { scope: containerRef });

另外官方还维护了 gsap-skills（AI 编程技能的 GSAP 知识包），让 AI 编码工具生成更准确的 GSAP 代码——对 AI 辅助开发时代很实用。

五、学习路径建议

1. 先玩 Tween：在 CodePen 上复制官方示例，改参数看效果，半小时建立手感
2. 再学 Timeline：做一个「标题→副标题→按钮」的依次入场动画，理解编排
3. 然后 ScrollTrigger：给一个长页面加滚动渐入，这是出效果最快的场景
4. 最后 SplitText + Flip：做作品集或产品页的进阶动效

记住一个原则：动画是增强，不是负担。好的网页动画让用户感到「顺」，而不是「炫」。GSAP 的文档和示例质量极高，遇到问题先查官方文档。

五、常见问题（FAQ）

Q：GSAP 免费真的完全免费吗？商用也可以？
A：是的。GSAP 已对所有人完全免费（含商用），由 Webflow 赞助，无需授权费。核心库和全部插件（包括 ScrollTrigger、SplitText 等此前付费的插件）都开放使用。这是它 2024 年以来最大的变化。

Q：GSAP 和 CSS 动画怎么分工？
A：简单动效（hover、过渡）用 CSS 就够了；需要时间线编排、滚动触发、复杂缓动、跨元素同步时再用 GSAP。经验法则：动效超过两个元素且需要节奏控制，就值得用 GSAP。

Q：和 Framer Motion（React）怎么选？
A：Framer Motion 是 React 生态的动画库，API 面向组件；GSAP 是框架无关的通用引擎，配合官方 useGSAP Hook 在 React 里也能用得很好。做 React 应用两者都可，做多页面营销站或复杂滚动叙事，GSAP 更通用。

Q：会影响页面性能吗？
A：GSAP 对性能做了大量优化（GPU 加速、按需渲染）。常见性能问题大多来自滥用——同时动画太多元素、动画时间过长。控制同时动画的元素数量，性能就不会是问题。

Q：从哪里学最靠谱？
A：官方文档（gsap.com）是最好的起点，每个 API 都有可运行的 CodePen 示例。官方还有 gsap-skills 仓库，让 AI 编程工具生成 GSAP 代码时更准确。

最后再强调一次：动画是「先有用，再好看」的事。先让页面动起来且不干扰阅读，再谈炫技。GSAP 的价值是给你足够的控制力——控制每个动画的时机、节奏、缓动，让页面动效服务于内容，而不是抢内容的风头。掌握 Tween 和 Timeline 两个核心概念，你就已经超过大多数只会复制粘贴动画代码的开发者了。

🎯 行动清单

• 第一步：打开 CodePen，引入 GSAP CDN，复制官方 Tween 示例跑一遍
• 第二步：用 Timeline 做一个三元素依次入场动画
• 第三步：给页面加 ScrollTrigger 滚动渐入效果
• 第四步：React 项目试试 useGSAP Hook
• 第五步：把 GSAP 加进你的下一个落地页，对比前后质感

参考来源：

1. [GSAP 官网](https://gsap.com) — 文档、插件与学习资源
2. [GSAP 免费化公告](https://gsap.com/pricing/) — Webflow 赞助与许可说明
3. [gsap-skills GitHub](https://github.com/gsap/gsap-skills) — AI 编程技能包
4. [MDN Web 文档](https://developer.mozilla.org/) — Web 动画技术背景参考
5. [CodePen](https://codepen.io/) — GSAP 示例运行平台

📖 延伸阅读

• 📰 本刊杂志 — 每日 AI 科技与自由生活指南
• 🎬 Hyperframes 视频框架实战 — GSAP 在视频渲染中的角色
• 🔧 UI-TARS-desktop 桌面自动化 — 开源 Agent 工具
• 🔧 llm-coding-agent 实战 — 一行命令编码 Agent

🔗 这个工具今天就能用：打开 gsap.com 官方文档，复制第一个 Tween 示例，5 分钟让元素动起来。

最后更新：2026-08-05