GSAP（GreenSock Animation Platform）是一套强大的 JavaScript 动画库，用于在网页上创建高性能、流畅、精确控制的动画效果。它被广泛用于交互动效、UI 动画、滚动动画、SVG 动画、3D 动画等各种场景，是目前业内非常流行的前端动画解决方案。
🌟 GSAP 的核心特点
| 特性 | 说明 |
|---|
| 🚀 高性能 | 动画运行非常顺畅，帧率高，适用于复杂动画 |
| 🧩 插件丰富 | ScrollTrigger、Flip、MotionPath、DrawSVG 等插件极大扩展了功能 |
| 🎯 精准控制 | 支持时间轴（Timeline）、动画序列、缓动函数、自定义控制等 |
| 🛠 跨浏览器兼容 | 支持几乎所有主流浏览器，兼容性强 |
| 🎨 支持多种对象 | 可对 DOM、CSS、SVG、Canvas、Three.js 等对象进行动画控制 |
| 📦 无依赖 | 原生 JS 实现，不依赖 jQuery 或其他框架 |
| 🧑💻 社区活跃 | 文档丰富，示例众多，官方社区活跃 |
📦 安装方式
使用 npm 或 yarn
npm install gsap
# 或者
yarn add gsap
CDN 引入
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
🧪 示例代码
基本动画
gsap.to(".box", { duration: 1, x: 100, rotation: 360 });
使用时间轴（Timeline）控制多个动画
const tl = gsap.timeline();
tl.to(".box1", { x: 100, duration: 1 })
.to(".box2", { y: 100, duration: 1 }, "<") // 同时开始
.to(".box3", { scale: 2, duration: 1 });
与滚动结合（ScrollTrigger 插件）
gsap.registerPlugin(ScrollTrigger);
gsap.to(".section", {
scrollTrigger: ".section",
y: 100,
opacity: 1,
duration: 1
});
🔌 常用插件
| 插件 | 功能 |
|---|
ScrollTrigger | 滚动驱动动画（最热门） |
Flip | 元素状态变化间的流畅过渡 |
MotionPathPlugin | 沿路径移动动画 |
DrawSVGPlugin | 控制 SVG 路径绘制过程 |
Draggable | 拖拽交互 |
Observer | 监听鼠标、键盘、滚动等行为触发动画 |
🎨 适用场景
🌐 官网与资源
