GSAP：专业级 JavaScript 动画库
Category（分类）: Visualization Status: 已读
官网：GSAP - Animate Anything 本文为工具站点收录，官网功能信息于收录时联网核实；授权、会员插件和 API 以 GSAP 官方文档 为准。
一、GSAP 是什么
GSAP（GreenSock Animation Platform）是面向专业 Web 动效的 JavaScript 动画库。它的定位不是只给 CSS 属性加过渡，而是提供动画创建、缓动、编排和复杂互动的一整套能力。
官网将它概括为 Animate Anything：可驱动 UI、SVG，也能参与 WebGL 等沉浸式体验。它尤其适合以下场景：
- 多元素按精确顺序进入、退出与交错出现；
- 品牌官网、产品叙事、滚动触发的页面章节；
- SVG 路径、文字、遮罩和复杂形状动效；
- Canvas、Three.js 等对象属性随时间变化；
- 需要统一时间线、暂停、倒放、重复或响应用户交互的动画系统。
二、官网工具方向
官网将能力按使用场景组织：
| 方向 | 解决的问题 |
|---|---|
| Scroll | 将滚动位置映射为连贯的页面叙事与交互 |
| SVG | 移动、变形以及处理 SVG 图形动效 |
| Text | 创建文字出现、拆分与过渡效果 |
| Eases | 使用内置缓动曲线，或创建自定义曲线 |
| Timeline | 把多个动画编排成可统一控制的序列 |
GSAP 的核心价值是“控制力”：多个动画不必靠散落的 setTimeout 或脆弱的 delay 互相猜时间，而可放入一个时间线统一安排和调整。
三、适合与不适合的地方
适合：
- 设计明确、动画本身是产品体验一部分的页面；
- 有连续叙事、滚动驱动、复杂 SVG 或精细编排需求；
- 团队愿意为动画的状态、可访问性与性能写工程化代码。
不必优先使用：
- 仅需按钮 hover、淡入淡出、简单展开收起：优先 CSS transition / animation；
- 业务后台的普通状态反馈：应先保证信息密度、性能与可访问性，而不是堆叠动效；
- 还没有明确交互目标时：先做静态信息层级，再决定哪些变化值得动画化。
四、工程使用原则
- 先设计状态，再做动画：明确初始、目标、可中断和失败状态，动画只是状态之间的过渡。
- 优先 transform 与 opacity：位移、缩放、旋转和透明度通常比频繁改动布局属性更适合高频动画。
- 遵守减少动态效果偏好：根据
prefers-reduced-motion减少或关闭非必要动画。 - 管理生命周期：单页应用在组件卸载、路由切换或响应式断点变化时，应清理相关动画与监听器。
- 检查移动端与低性能设备：长距离滚动动画、滤镜、阴影和大面积重绘可能在低端设备上掉帧。
- 先确认授权范围：核心库和部分插件的可用范围、商业项目要求会随官方政策变化，使用前以官网许可说明为准。
五、学习路径
建议顺序：先理解单个补间动画（Tween）的目标、属性、时长和缓动；再学习时间线；最后按项目需求进入滚动、SVG、文本与拖拽等专项能力。本分类《GSAP 中文教程：核心基础》记录了 to/from/fromTo/set、缓动、交错和时间线的入门要点。
整理者注
GSAP 不是用来“让页面到处都动”的装饰品。最好的 GSAP 动效应该帮助用户看懂层级、因果和操作反馈；当关掉动画后，页面的信息与交互仍应完整成立。