个人开发学习资料库

Appearance

GSAP 介绍文档 ​

更新: 6/6/2026 字数: 0 字 时长: 0 分钟

一、基本定义 ​

GSAP 全称 GreenSock Animation Platform，是一套用 JavaScript 驱动的 Web 动画库。它的作用是控制任意数值随时间变化——DOM 元素的 CSS 属性、SVG 的路径与属性、Canvas/WebGL 对象的参数，甚至普通的 JS 对象，都能被它逐帧补间（tween）。

它不依赖任何框架，原生 JS、React、Vue、Svelte 里都能直接用，体积约 70KB（核心库压缩后），通过 CDN 一行 <script> 就能引入。截至 2024 年，GSAP 的全部功能（包括过去收费的 ScrollTrigger、SplitText 等插件）已全部免费开放。

二、核心功能 ​

补间动画（Tween）：基础单位。gsap.to()、gsap.from()、gsap.fromTo() 三个方法定义元素从当前状态到目标状态、或从指定状态到当前状态的过渡。

时间轴（Timeline）：把多个补间串成可控的序列。支持重叠、延迟、相对定位（如 "-=0.3" 表示提前 0.3 秒开始），还能整体播放、暂停、倒放、跳转进度。复杂的多步动画几乎都靠它编排。

缓动（Easing）：内置 power、back、elastic、bounce、sine 等几十种曲线，控制动画的加速与减速节奏，也支持自定义贝塞尔曲线。

插件扩展，按需引入：

  • ScrollTrigger：把动画绑定到滚动位置，实现滚动触发、滚动同步（scrub）、元素钉住（pin）、视差等效果。
  • MotionPathPlugin：让元素沿任意 SVG 路径运动，并可自动旋转朝向。
  • ScrollToPlugin：平滑滚动到页面指定位置。
  • Draggable：拖拽交互，支持惯性与边界约束。
  • SplitText：把文本拆成字符、单词、行，做逐字入场动画。

辅助工具：gsap.utils 提供数值映射、随机、插值等函数；gsap.quickTo() 返回轻量 setter，适合鼠标跟随这类高频更新场景。

三、适用场景 ​

  • 落地页、品牌官网的视觉动效与滚动叙事；
  • 数据可视化中数值、图形的动态过渡；
  • SVG 图标、Logo 的描边与变形动画；
  • 交互组件的微动效，如按钮反馈、菜单展开、加载提示；
  • 游戏 UI、H5 营销页等需要精确时序控制的场景。

当动画涉及多个元素的时序协调、滚动联动，或需要在运行时动态控制（暂停、倒放、跳转）时，GSAP 比纯 CSS 动画更合适。简单的 hover 状态切换则用 CSS 即可，不必引入。

四、核心优势 ​

性能：底层用 requestAnimationFrame 驱动，优先操作 transform 等可触发 GPU 加速的属性，内置 lag smoothing 机制，在低端设备和 CPU 占用高时仍能保持帧率稳定。

精确控制：时间轴可以随时 seek() 到任意时刻、progress() 设到任意百分比、reverse() 倒放。CSS 动画做不到这种运行时的双向控制。

兼容性：自动处理浏览器前缀和各类属性差异，同一段代码在不同浏览器表现一致，开发者无需手写兼容代码。

生态完整：从基础补间到滚动、路径、拖拽、文字拆分，一套 API 覆盖绝大多数动画需求，插件之间可组合使用，学习一次即可迁移。

框架无关：不绑定任何前端框架。React 项目可配合官方 useGSAP Hook 处理生命周期与清理。

五、基础使用示例 ​

通过 CDN 引入核心库与所需插件：

html
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>

单个补间——元素在 1 秒内向右移动 100px 并旋转 360 度：

javascript
gsap.to(".box", {
  x: 100,           // 等价于 transform: translateX(100px)，走 GPU 加速
  rotation: 360,
  duration: 1,
  ease: "power2.out"
});

时间轴序列——标题、正文、按钮依次入场，后一段提前 0.3 秒重叠：

javascript
const tl = gsap.timeline({ defaults: { duration: 0.6, ease: "power3.out" } });
tl.from(".title",   { y: 40, opacity: 0 })
  .from(".content", { y: 40, opacity: 0 }, "-=0.3")
  .from(".btn",     { scale: 0.8, opacity: 0 }, "-=0.3");

滚动触发——元素滚动到视口中央时入场，需先注册插件：

javascript
gsap.registerPlugin(ScrollTrigger);

gsap.from(".card", {
  y: 60,
  opacity: 0,
  duration: 0.8,
  scrollTrigger: {
    trigger: ".card",
    start: "top 80%",   // 元素顶部到达视口 80% 处时触发
    toggleActions: "play none none reverse"
  }
});

滚动同步（scrub）——动画进度跟随滚动条，可正可反：

javascript
gsap.to(".panel", {
  x: -1000,
  ease: "none",
  scrollTrigger: {
    trigger: ".container",
    start: "top top",
    end: "+=2000",
    scrub: 1,           // 数值为动画追上滚动的缓冲秒数
    pin: true           // 滚动期间钉住容器
  }
});