GSAP

业界领先的专业 JavaScript 动画库，能够以极致流畅的性能驱动任何 JS 可触及的 DOM、SVG、Canvas、WebGL 元素的动画

精选工具动画专业动画滚动动画SVG动画

GSAP 是被超过 1200 万个网站使用的专业动画解决方案，提供业界最强大的时间轴编排和滚动动画能力，所有插件已免费开放。

GSAP

业界领先的专业 JavaScript 动画库，能够以极致流畅的性能驱动任何 JS 可触及的 DOM、SVG、Canvas、WebGL 元素的动画，是 Web 动画领域的行业标准。

技术简介说明

GSAP（GreenSock Animation Platform）由 Jack Doyle 于 2008 年创建，是一个专注于高性能 Web 动画的 JavaScript 库。经过十余年的持续迭代，GSAP 已成为全球最受欢迎的专业动画解决方案，被超过 1200 万个网站使用，覆盖约 2.2% 的互联网全站。从品牌官网到交互式数据可视化、从滚动叙事到复杂的 UI 交互，GSAP 几乎出现在所有需要精细动画控制的场景中。

GSAP 的核心设计理念是"框架无关"（framework-agnostic）——它不依赖 React、Vue 或其他框架，可以在任何 JavaScript 环境中独立运行。同时也提供了官方 React 集成包 @gsap/react，提供 useGSAP() hook 以简化 React 项目中的动画管理。GSAP 零外部依赖，所有动画均通过内部的 requestAnimationFrame 驱动，确保在各种设备上都能达到 60fps 的流畅表现。

2024 年 10 月，GSAP 被可视化建站平台 Webflow 收购。2025 年 4 月，Webflow 宣布 GSAP 完全免费开放——包括此前需要付费会员才能使用的全部高级插件（SplitText、MorphSVG、DrawSVG 等），同时支持商业用途。这一决定彻底消除了 GSAP 最大的采用障碍，使其生态影响力进一步扩大。

基本信息

官网：https://gsap.com
GitHub：https://github.com/greensock/GSAP（26.4k stars，2.1k forks）
License：Standard "No Charge" License（免费标准许可，支持商业用途，非开源；2025 年 4 月 Webflow 收购后全面免费开放）
最新版本：3.15.0（2026 年 4 月 13 日发布）
npm 周下载量：约 350 万+（2026 年 4 月数据）
包体积：完整包 ~26.7 KB gzipped / ~69 KB minified（核心模块 tree-shaken 后约 9 KB gzipped）
主要维护者/公司：GreenSock（Jack Doyle 创始），2024 年 10 月起由 Webflow 支持并维护
语言：JavaScript（98.6%）、TypeScript（1.4%，含官方类型定义）
浏览器支持：所有现代浏览器（Chrome、Firefox、Safari、Edge）

快速上手

安装

NPM / Yarn / pnpm

# npm
npm install gsap
 
# yarn
yarn add gsap
 
# pnpm
pnpm add gsap

CDN

<!-- jsDelivr -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
 
<!-- unpkg -->
<script src="https://unpkg.com/[email protected]/dist/gsap.min.js"></script>
 
<!-- cdnjs -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.15.0/gsap.min.js"></script>

ES Modules（推荐）

import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
 
// 注册插件
gsap.registerPlugin(ScrollTrigger)

UMD（构建工具不识别 ES Module 时）

import { gsap } from 'gsap/dist/gsap'
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'
 
gsap.registerPlugin(ScrollTrigger)

TypeScript 配置

在 tsconfig.json 中添加 GSAP 的类型定义：

{
  "compilerOptions": {},
  "files": ["node_modules/gsap/types/index.d.ts"]
}

基础配置

GSAP 几乎开箱即用，零配置即可启动。唯一需要注意的是插件注册——使用任何插件前必须通过 gsap.registerPlugin() 显式注册，以防止构建工具的 tree-shaking 误删插件代码：

import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import { ScrollToPlugin } from 'gsap/ScrollToPlugin'
import { Draggable } from 'gsap/Draggable'
 
// 一次性注册所有需要的插件
gsap.registerPlugin(ScrollTrigger, ScrollToPlugin, Draggable)

最佳实践：在一个集中的文件中统一导入和注册所有插件，其他模块通过导入这个中心文件来使用 GSAP，避免重复注册。

最小示例

基础 Tween

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background: #4e73df;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <div class="box"></div>
 
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
  <script>
    // 将 .box 元素在 1 秒内向右移动 300px 并旋转 360 度
    gsap.to('.box', {
      x: 300,
      rotation: 360,
      duration: 1,
      ease: 'power2.out'
    })
  </script>
</body>
</html>

Timeline 时间轴示例

// 创建有序动画序列
const tl = gsap.timeline({ repeat: -1 })
 
tl.to('.box', { x: 300, duration: 1 })
  .to('.box', { y: 200, duration: 0.5 })
  .to('.box', { scale: 1.5, rotation: 180, duration: 0.8 })
  .to('.box', { x: 0, y: 0, scale: 1, rotation: 0, duration: 1 })

React 集成示例

import { useRef } from 'react'
import { useGSAP } from '@gsap/react'
import { gsap } from 'gsap'
 
function AnimatedComponent() {
  const container = useRef(null)
 
  // useGSAP 自动处理组件卸载时的动画清理
  useGSAP(() => {
    gsap.from('.item', {
      y: 50,
      opacity: 0,
      stagger: 0.1,
      duration: 0.6
    })
  }, { scope: container })
 
  return (
    <div ref={container}>
      <div className="item">第一项</div>
      <div className="item">第二项</div>
      <div className="item">第三项</div>
    </div>
  )
}

核心概念与架构

核心概念

Tween（补间动画） GSAP 最基本的动画单元。通过 gsap.to()、gsap.from()、gsap.fromTo() 创建，指定目标元素和属性变化值，GSAP 负责在指定时间内平滑过渡。支持任何数值属性、CSS 属性、SVG 属性、颜色值等。

Timeline（时间轴） 动画序列的编排器，类似视频编辑软件的时间线。通过 gsap.timeline() 创建，支持将多个 tween 按顺序、重叠或延迟排列，实现复杂的编排。Timeline 本身也是一个 Tween，因此可以被整体控制（播放、暂停、反转、调整速度）。

Ease（缓动函数） 控制动画节奏的曲线。GSAP 内置了大量缓动类型：power0 ~ power4、back、bounce、elastic、expo、sine 等，并支持通过 CustomEase 插件创建任意贝塞尔曲线缓动。3.15 版本新增的 easeReverse 属性解决了反向播放时缓动曲线不自然的问题。

Plugin（插件系统） GSAP 通过插件扩展能力。核心插件包括 ScrollTrigger（滚动触发）、Flip（FLIP 动画）、Draggable（拖拽）等。所有插件需要通过 gsap.registerPlugin() 注册后使用。

Callback & Event（回调与事件） 每个 tween/timeline 的生命周期事件：onStart、onUpdate、onComplete、onReverseComplete、onRepeat，支持在动画的关键节点执行自定义逻辑。

架构设计

┌─────────────────────────────────────────────┐
│                 GSAP Core                   │
│  ┌───────┐  ┌──────────┐  ┌──────────────┐ │
│  │ Tween │  │ Timeline │  │   Ease       │ │
│  │       │  │          │  │   Engine     │ │
│  └───┬───┘  └────┬─────┘  └──────────────┘ │
│      │           │                          │
│  ┌───┴───────────┴──────────────────────┐   │
│  │         Plugin System                │   │
│  │  ┌────────────┐  ┌────────────────┐  │   │
│  │  │ScrollTrigger│  │    Flip       │  │   │
│  │  └────────────┘  └────────────────┘  │   │
│  │  ┌────────────┐  ┌────────────────┐  │   │
│  │  │ Draggable  │  │  MotionPath    │  │   │
│  │  └────────────┘  └────────────────┘  │   │
│  │  ┌────────────┐  ┌────────────────┐  │   │
│  │  │  SplitText │  │  MorphSVG     │  │   │
│  │  └────────────┘  └────────────────┘  │   │
│  │  ┌────────────┐  ┌────────────────┐  │   │
│  │  │ DrawSVG    │  │  Observer      │  │   │
│  │  └────────────┘  └────────────────┘  │   │
│  └──────────────────────────────────────┘   │
│                                             │
│  requestAnimationFrame 驱动 · GPU 加速变换   │
└─────────────────────────────────────────────┘

GSAP 内部通过 requestAnimationFrame 循环驱动所有活跃动画，自动将 CSS transform 相关属性（x、y、scale、rotation 等）转换为 GPU 加速的 transform CSS 属性，避免触发布局重排（reflow）。核心架构高度模块化，按需引入插件不会增加未使用代码的体积。

核心特性

极致的性能：通过 GPU 加速 CSS transform、内部 requestAnimationFrame 调度、属性批量更新，实现丝滑的 60fps 动画，官方声称比 jQuery 动画快 20 倍。
强大的 Timeline 编排：支持无限嵌套的时间轴，可精确控制动画的时序、重叠、延迟和重复，是 Web 动画领域最成熟的序列编排方案。
ScrollTrigger 滚动动画：将动画与滚动位置精确绑定，支持触发点、视口百分比、scrub（实时跟随滚动）、pin（固定元素）等，是实现滚动叙事的首选方案。
完整的 SVG 动画支持：通过 DrawSVG（路径描绘）、MorphSVG（形状变形）、MotionPath（沿路径运动）等插件，提供从 SVG 路径到形状的全方位动画能力。
丰富的缓动系统：内置 30+ 种缓动函数，支持 CustomEase 自定义贝塞尔曲线，3.15 新增 easeReverse 实现反向播放时的自适应方向缓动。
框架无关 + 官方框架集成：核心库可在任何 JS 环境运行，同时提供 @gsap/react（含 useGSAP hook）等官方集成包，简化在 React/Vue 等框架中的使用。
Flip 插件：实现 FLIP（First, Last, Invert, Play）动画模式，可轻松完成布局变化时的平滑过渡动画，适用于列表排序、卡片展开、模态框弹出等场景。
Draggable 拖拽系统：提供专业级的拖拽交互能力，支持 bounds 限制、惯性投掷（throw）、点击锁定、触摸支持，适用于滑块、转盘、拖放排序等场景。
文字动画：SplitText 将文本拆分为字符/单词/行进行独立动画控制，ScrambleText 提供文字乱码解密效果，Typewriter 实现打字机效果。
零依赖：整个库不依赖任何第三方包，不会引入额外的包体积和版本冲突风险。
完善的 TypeScript 支持：内置官方类型定义文件，提供完整的类型检查和 IDE 智能提示。
ScrollSmoother 平滑滚动：提供原生滚动体验之上的平滑滚动和视差效果，解决不同浏览器和设备间滚动行为不一致的问题。

生态图

官方插件生态

GSAP 的插件生态系统是其核心竞争力的重要组成部分。自 2025 年 4 月起，所有插件均免费开放：

插件类别	插件名称	功能描述
滚动类	ScrollTrigger	将动画绑定到滚动位置，支持 scrub、pin、markers
	ScrollToPlugin	平滑滚动到指定位置
	ScrollSmoother	全局平滑滚动 + 视差效果
SVG 类	DrawSVG	逐步显示/隐藏 SVG 描边路径
	MorphSVG	SVG 路径形状变形过渡
	MotionPath	让元素沿 SVG 路径运动
文字类	SplitText	将文本拆分为字符/单词/行
	ScrambleText	文字乱码解密动画效果
	TextPlugin	逐字打字机效果
UI 交互类	Flip	FLIP 布局动画（先记录、后变化、反向播放）
	Draggable	专业拖拽交互（支持投掷、边界、触摸）
	Observer	统一监听滚轮、触摸、指针、键盘等输入
工具类	CustomEase	自定义贝塞尔曲线缓动
	GSDevTools	可视化时间轴调试工具
	Physics2D/PhysicsProps	2D 物理运动和自定义物理属性

社区与框架集成

@gsap/react：官方 React 集成包，提供 useGSAP() hook，自动处理动画生命周期（创建、更新、清理）
@gsap/vue：Vue 集成支持
Made With GSAP（madewithgsap.com）：社区作品展示平台
CodePen：大量 GSAP 社区作品和示例
GSAP Forums（gsap.com/community/forums）：官方论坛，GreenSock 团队成员积极回复

关键依赖

GSAP 本身零依赖。在生产环境中可能配合使用的工具：

Lenis / Locomotive Scroll：第三方平滑滚动库（可与 ScrollTrigger 配合）
Three.js：WebGL 3D 场景（GSAP 可驱动 Three.js 对象的属性动画）
React / Vue / Svelte：前端框架（GSAP 与框架无耦合，通过 ref/生命周期集成）

适用场景

品牌官网与营销页面：GSAP 是高端品牌官网动画的事实标准。从首屏入场动画到产品特性展示，ScrollTrigger + Timeline 组合能够实现令人印象深刻的滚动叙事体验。
滚动驱动交互（Scroll-based Storytelling）：ScrollTrigger 可以将任何动画精确绑定到滚动位置，支持 scrub（实时跟随）、pin（元素固定）、snap（滚动吸附），是数据可视化叙事和产品页面的首选方案。
复杂 SVG 动画：图标动画、路径描绘、形状变形、沿路径运动等 SVG 动画需求，DrawSVG + MorphSVG + MotionPath 插件提供了完整的解决方案，无需切换到 Lottie 等格式。
UI 微交互：模态框弹出、菜单展开、列表排序过渡、页面切换动画。Flip 插件的 FLIP 模式特别适合处理布局变化时的平滑过渡，3.15 新增的 easeReverse 让可逆动画更加自然。
交互式可视化：数据图表的入场动画、数据切换过渡、仪表盘指标动画。GSAP 的精确时序控制确保数据变化过程流畅可理解。
Canvas / WebGL 动画：虽然 GSAP 本身操作 DOM，但其数值补间能力可以驱动任何 JavaScript 对象的属性变化，包括 Canvas 2D 上下文和 Three.js 3D 场景中的相机、材质、位置等。
游戏化交互与创意开发：Draggable 的投掷物理、Physics2D 的运动模拟、Observer 的多输入统一监听，为创意交互和游戏化体验提供了底层能力。

开发与工程化

开发流程

项目初始化

# 创建项目并安装 GSAP
npm create vite@latest my-animation-project -- --template react-ts
cd my-animation-project
npm install gsap @gsap/react

插件集中管理（推荐模式）

// src/lib/gsap.js — 集中注册所有插件
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import { ScrollToPlugin } from 'gsap/ScrollToPlugin'
import { Flip } from 'gsap/Flip'
import { Draggable } from 'gsap/Draggable'
 
gsap.registerPlugin(ScrollTrigger, ScrollToPlugin, Flip, Draggable)
 
export { gsap, ScrollTrigger, ScrollToPlugin, Flip, Draggable }

React 项目中的动画管理

// 使用 useGSAP 自动处理清理
import { useGSAP } from '@gsap/react'
import { gsap } from '@/lib/gsap'
 
function Page() {
  useGSAP(() => {
    const ctx = gsap.context(() => {
      // 所有动画在此上下文中创建
      gsap.from('.hero-title', { y: 80, opacity: 0, duration: 1 })
      gsap.from('.hero-subtitle', { y: 40, opacity: 0, duration: 0.8, delay: 0.3 })
    })
 
    return () => ctx.revert() // 清理所有动画和 ScrollTrigger 实例
  })
}

构建与部署

GSAP 完全兼容主流构建工具，无需特殊配置：

Vite / webpack / Rollup / esbuild：直接 import，tree-shaking 正常工作
Next.js：需注意 SSR 环境下 GSAP 只在客户端执行，使用 useEffect 或 useGSAP 包裹
Nuxt：通过 plugin 模式注册，注意 process.client 判断
Vercel / Netlify：标准部署流程，无需额外配置

Next.js SSR 注意事项

'use client'
import { useEffect, useRef } from 'react'
import { gsap } from 'gsap'
 
export default function Page() {
  const ref = useRef(null)
 
  useEffect(() => {
    // 确保只在客户端执行
    const ctx = gsap.context(() => {
      gsap.from(ref.current.children, {
        opacity: 0,
        y: 30,
        stagger: 0.1
      })
    }, ref)
 
    return () => ctx.revert()
  }, [])
 
  return <div ref={ref}>{/* ... */}</div>
}

CI/CD 集成

GSAP 不引入运行时依赖，不改变构建流程，可无缝集成到任何 CI/CD 管道：

# GitHub Actions 示例
- name: Install dependencies
  run: pnpm install
 
- name: Type check (含 GSAP 类型)
  run: pnpm typecheck
 
- name: Build
  run: pnpm build
 
- name: Test
  run: pnpm test

性能与安全

性能特点

GSAP 的性能优势源于多个层面的优化：

GPU 加速：自动将 x、y、scale、rotation 等属性转换为 CSS transform，利用 GPU 合成层避免触发布局重排和重绘。
高效调度：内部使用单一 requestAnimationFrame 循环管理所有活跃动画，避免多个独立动画循环的性能开销。
属性缓存：缓存元素的计算样式和变换矩阵，减少重复的 DOM 查询。
智能批处理：将同一帧内的多次 DOM 写入合并执行，避免强制同步布局。
惰性计算：仅在需要时计算动画值，未激活的动画不消耗 CPU。

优化建议

优先动画 transform 和 opacity：这两个属性可以由 GPU 合成，不触发布局重排或重绘。避免动画 width、height、top、left、margin、padding 等触发 reflow 的属性。
避免动画 filter 和 box-shadow：这些属性触发重绘，大量使用会导致性能下降。如需使用，限制同时动画的元素数量。
使用 autoAlpha 替代 opacity + visibility：autoAlpha 在值为 0 时自动设置 visibility: hidden，使元素退出渲染树，减少浏览器的合成负担。
限制同时动画的 DOM 元素数量：超过数百个元素同时动画时考虑使用 Canvas 渲染。
ScrollTrigger 使用 will-change 谨慎：过度使用 will-change 反而消耗内存，仅在需要的元素上短期使用。
合理使用 force3D: true：强制创建 GPU 合成层，适合频繁动画的元素，但不宜滥用（每个合成层占用额外内存）。
及时清理：在 SPA 或框架中，组件卸载时必须清理 GSAP 实例和 ScrollTrigger，避免内存泄漏和幽灵动画。

安全注意事项

GSAP 本身不执行网络请求、不处理用户输入、不操作 cookie/storage，攻击面极小。
动画的目标选择器（如 gsap.to('.selector', ...)）应避免使用用户可控的输入作为 CSS 选择器，防止潜在的 XSS 风险。
GSAP 通过公共 npm 注册表分发，Snyk 等安全扫描服务将其归类为"关键生态项目"，未发现已知安全漏洞。
License 条款禁止将 GSAP 用于开发直接竞争 Webflow 的无代码可视构建器产品。

已知性能瓶颈

大量 SVG 元素同时动画：SVG DOM 操作比 HTML DOM 更昂贵，大量 SVG 路径同时动画可能导致卡顿。
ScrollTrigger + 复杂 DOM：scroll 事件监听频率高，如果回调中包含复杂的 DOM 查询或布局计算，可能影响滚动流畅度。使用 refreshPriority 和 batch 优化。
旧设备上的弹性缓动：elastic、bounce 等缓动函数计算量较大，在低端设备上可能出现掉帧。

技术对比

维度	GSAP	Motion（原 Framer Motion）	Anime.js	CSS 动画
定位	专业级通用动画引擎	React-first 声明式动画库（2025 年中更名为 Motion）	轻量级 JS 动画引擎	浏览器原生 CSS 能力
包体积	~26.7 KB gzipped（完整包）/ ~9 KB gzipped（核心 tree-shaken）	~12-18 KB gzipped（支持 tree-shaking）	~11 KB gzipped	0 KB（浏览器内置）
框架依赖	无（提供 React/Vue 集成）	React 强绑定（Motion 支持多框架）	无	无
Timeline 编排	强大，支持无限嵌套	有，但基于声明式 API	v4 新增 timeline	无原生 timeline
滚动动画	ScrollTrigger 是业界标杆	无原生滚动动画支持	无	Scroll-driven Animations（实验性）
SVG 动画	完整支持（DrawSVG、MorphSVG、MotionPath）	基础 SVG 属性动画	良好的 SVG 支持	有限
布局动画	Flip 插件	内置 layout 动画（核心优势）	无	View Transitions API（实验性）
缓动系统	30+ 内置 + CustomEase	Spring 物理动画为主	30+ 内置	`cubic-bezier` + 少量预设
GPU 加速	自动 transform 优化	利用 GPU 处理	手动优化	`will-change` / `transform`
React 集成	`@gsap/react`（useGSAP hook）	原生支持，声明式 API	无官方集成	无
License	免费标准许可（非开源）	MIT 开源	MIT 开源	N/A
学习曲线	中等，API 丰富但概念多	低（React 开发者友好）	低	低
社区规模	26.4k GitHub stars，1200 万+站点使用	24k+ stars，~3300 万周下载	66k+ stars，~32 万周下载	N/A（浏览器标准）
适用场景	复杂动画编排、滚动叙事、SVG、跨框架	React 应用 UI 动画、布局过渡	轻量动画、简单交互	简单过渡、hover 效果

选型建议

选 GSAP：需要复杂时间轴编排、滚动驱动动画、SVG 动画、跨框架兼容，或项目对动画性能有极致要求。GSAP 的 ScrollTrigger 在滚动叙事领域仍是无可替代的标杆方案。
选 Motion：纯 React 项目，主要需求是 UI 过渡、布局动画、exit 动画，团队偏好声明式 API。Motion 在特定基准测试（如未知值动画、值类型切换）中比 GSAP 快 2.5-6 倍，但缺少 ScrollTrigger 等滚动动画能力。
选 Anime.js：轻量级需求，不需要复杂的时间轴和滚动动画，追求 MIT 开源许可。v4 版本新增了 Timeline 支持。
选 CSS 动画：简单的 hover、过渡、加载效果，不需要 JavaScript 控制，追求最小包体积。CSS Scroll-driven Animations 正在实验阶段，未来可能替代部分 GSAP 滚动动画场景。

最佳实践

生产环境建议

集中管理插件注册：创建一个 gsap.js 或 gsap.ts 文件，统一导入和注册所有插件，其他模块只导入这个文件，避免重复注册和遗漏。
使用 gsap.context() 管理作用域：尤其在 SPA 和框架中，使用 context 管理动画的生命周期，组件卸载时通过 context.revert() 清理所有动画和 ScrollTrigger 实例。
优先使用 transform 属性：x、y、scale、rotation、skewX 等 GSAP 内置的 transform 简写属性自动走 GPU 加速路径。
Timeline 优于独立 Tween：多个相关动画优先组织到 Timeline 中，便于统一控制（播放、暂停、反转、速度调整），代码也更清晰。
ScrollTrigger 的 once 和 toggleActions：对于只需触发一次的入场动画，使用 once: true；对于需要反复触发的动画，合理配置 toggleActions。
autoAlpha 替代 opacity：需要显示/隐藏元素时使用 autoAlpha，它在 opacity 为 0 时自动添加 visibility: hidden，使元素退出渲染树。

常见陷阱

忘记注册插件：使用 ScrollTrigger、Flip 等插件前必须 gsap.registerPlugin()，否则会静默失败。
SSR 环境直接执行 GSAP：GSAP 操作 DOM，在服务端渲染环境中需要确保只在客户端执行（useEffect、onMounted 或 typeof window !== 'undefined' 判断）。
未清理 ScrollTrigger：页面切换或组件卸载时未调用 ScrollTrigger.getAll().forEach(t => t.kill())，导致内存泄漏和幽灵触发。
动画 width/height 导致 reflow：需要尺寸变化时优先用 scale 替代，或确保动画元素使用 position: absolute/fixed 脱离文档流。
在循环中创建大量独立 Tween：应使用 Timeline 或 stagger 批量管理，避免创建数百个独立的 gsap.to() 调用。
构建工具误删插件：未使用 registerPlugin() 时，tree-shaking 可能将插件代码视为"未使用"而删除，导致运行时功能缺失。

技术局限与边界

已知限制

非开源许可：GSAP 使用 Standard "No Charge" License，虽然完全免费且支持商业用途，但不是开源协议。License 禁止将 GSAP 用于开发直接竞争 Webflow 的无代码可视构建器产品，也禁止逆向工程以创建竞品。这对大多数开发者不构成问题，但在特定场景下需要法务评估。
包体积相对较大：完整包 ~26.7 KB gzipped 比 Anime.js（~11 KB）和 Motion（~12 KB）更大。不过核心模块可通过 tree-shaking 精简至约 9 KB gzipped。GSAP 的核心不支持 tree-shaking——导入任何部分都会包含整个核心库。插件可以按需引入，但核心始终是全量打包。
命令式 API 在 React 中较繁琐：虽然 @gsap/react 改善了体验，但 GSAP 的命令式本质与 React 的声明式范式存在一定冲突，不如 Motion 那样"原生"融入 React 生态。
不支持 Web Animations API (WAAPI)：GSAP 使用自己的 requestAnimationFrame 引擎而非浏览器原生的 Web Animations API，无法利用 WAAPI 的离线播放、浏览器级别优化等新特性。
学习曲线：API 非常丰富，概念较多（Tween、Timeline、ScrollTrigger、Flip、context、matchMedia 等），新手上手需要一定时间。

不适用场景

简单的 CSS hover/transition 效果：使用 CSS 过渡更轻量、更高效，无需引入 JS 动画库。
纯 React 项目的 UI 过渡：如果项目主要在 React 中做 UI 组件过渡（模态框、菜单、列表动画），Motion（原 Framer Motion）的声明式 API 和 layout 动画可能更合适。
Lottie/After Effects 动画回放：GSAP 是代码驱动的动画库，不支持直接播放 After Effects 导出的 Lottie 动画。如需此类能力应考虑 Lottie-web。
3D 场景渲染：GSAP 可以驱动 3D 属性变化，但不是 3D 渲染引擎，复杂的 3D 交互应使用 Three.js + GSAP 配合。
需要完全开源协议的项目：如果项目要求所有依赖都使用 MIT/BSD/Apache 等标准开源协议，GSAP 的非开源许可可能不合规。

迁移注意事项

从付费版迁移到免费版（3.13+）：2025 年 4 月后，所有 GSAP 插件免费。如果此前使用私有 npm registry（Club GSAP），需要更新 .npmrc 指向公共 npm registry，并确保版本 >= 3.13。
从 jQuery 动画迁移：GSAP API 与 jQuery .animate() 差异较大，但功能更强。建议逐步迁移，先从复杂动画开始。
从 Anime.js 迁移：API 概念相似（tween、timeline、easing），但 GSAP 的 Timeline API 更强大，ScrollTrigger 是 Anime.js 不具备的。
版本升级（3.x → 3.15）：3.15 中 yoyoEase 被废弃，需替换为 easeReverse（完全向后兼容，但建议更新代码）。

学习资源

官方文档

GSAP 官方文档 — 完整的 API 参考和指南
GSAP Installation Guide — 安装与配置
ScrollTrigger 文档 — 滚动触发插件完整指南
GSAP Blog — 版本发布说明和技术文章
GSAP 官方 CodePen 集合 — 官方示例和演示

教程

GSAP 官方入门教程 — 官方推荐的学习路径
GSAP 3 基础教程（YouTube） — GreenSock 官方 YouTube 频道
Snorkl.tv GSAP 教程 — 高质量 GSAP 视频教程
Creative Coder GSAP 系列 — 实战项目教程
Codrops GSAP 插件创意演示 — 2025 年免费插件创意 Demo

社区资源

GSAP Forums — 官方论坛，GreenSock 团队成员（Jack Doyle、Cassie 等）积极回复问题
Made With GSAP — 社区作品展示与灵感收集
GSAP Stack Overflow — Stack Overflow 上的 GSAP 标签
r/gsap (Reddit) — Reddit 社区
GSAP GitHub Issues — Bug 报告和特性讨论
Webflow Community — Webflow 社区论坛（GSAP 收购后，讨论日益活跃）
Awesome GSAP — 社区精选资源列表

2026 年现状

发展历程

时间	里程碑
2008	Jack Doyle 创建 GreenSock Animation Platform
2012	GSAP 2.0 发布，成为 Flash 动画迁移的主流方案
2020	GSAP 3.0 发布，全面重写为现代 ES6 架构
2021	ScrollTrigger 成为业界标杆的滚动动画方案
2024.10	Webflow 在 Webflow Conf 2024 宣布收购 GreenSock
2025.04	GSAP 3.13 发布，全部插件免费开放，支持商业用途
2025.12	GSAP 3.14 发布
2026.04	GSAP 3.15 发布，新增 easeReverse 和 Flip 升级

社区活跃度

GitHub：26.4k stars，2.1k forks，仅 5 个 open issues（说明核心维护团队响应及时）
npm：约 350 万+ 周下载量（2026 年 4 月）
市场覆盖：约 2.2% 的全网网站使用 GSAP（w3techs 数据）
论坛：GSAP Forums 持续活跃，GreenSock 团队保持高频回复
生态影响：CSS 处理了约 80% 的简单 Web 动画需求，但 GSAP 在复杂时间轴编排和滚动叙事领域仍无可替代

发展趋势

Webflow 深度整合：GSAP 正逐步成为 Webflow 平台的底层动画引擎，未来可能在 Webflow 编辑器中获得更深度的一级支持。
持续免费策略：Webflow 的商业模式使 GSAP 无需依靠自身许可收费，预计将长期保持免费开放。
React 集成加强：@gsap/react 包的 useGSAP() hook 表明 GSAP 在积极应对 React 生态的声明式趋势。
性能优化持续：2025 年的代码重写声称减少了约 50% 的文件体积，未来预计继续优化包体积。
社区增长：免费化后预计将有更多开发者采用 GSAP，社区内容和教程将持续增长。

GSAP

GSAP

技术简介说明

基本信息

快速上手

安装

NPM / Yarn / pnpm

CDN

ES Modules（推荐）

UMD（构建工具不识别 ES Module 时）

TypeScript 配置

基础配置

最小示例

基础 Tween

Timeline 时间轴示例

React 集成示例

核心概念与架构

核心概念

架构设计

核心特性

生态图

官方插件生态

社区与框架集成

关键依赖

适用场景

开发与工程化

开发流程

项目初始化

插件集中管理（推荐模式）

React 项目中的动画管理

构建与部署

Next.js SSR 注意事项

CI/CD 集成

性能与安全

性能特点

优化建议

安全注意事项

已知性能瓶颈

技术对比

选型建议

最佳实践

生产环境建议

常见陷阱

推荐模式

技术局限与边界

已知限制

不适用场景

迁移注意事项

学习资源

官方文档

教程

社区资源

2026 年现状

最新版本

发展历程

社区活跃度

发展趋势