GSAP
设计与创意
GreenSock
免费API
关于
专业级 JavaScript 动画库，驱动 1100 万+ 网站，以极致性能和流畅的 ScrollTrigger 滚动动画著称，免费使用（商业授权需按用户量付费）
平台支持
网页版API
可用平台包括网页版和API。
核心功能
基于时间线的强大动画序列编排
ScrollTrigger 滚动驱动动画
MorphSVG、MotionPath、DrawSVG、Text 等高级插件
极致性能（移动端也能保持 60fps）
轻量核心（~10KB gzipped）+ 模块化插件架构
跨浏览器兼容，包括 IE11
定价方案
free
大部分场景免费
paid
商业使用需购买授权（按用户量计费）
使用场景
网站动画和交互式 UI 元素
滚动触发动画和视差效果
SVG 动画和运动图形
游戏 UI 和交互式叙事
优点
Web 动画行业标准，可靠性经过验证
即使在低端设备上也有卓越性能
丰富的插件生态满足高级动画需求
优秀的文档和活跃的社区
缺点
高级插件需要付费 Club GreenSock 会员
商业授权对小型团队可能不够清晰
没有官方 TypeScript 类型声明（社区维护）
最新动态
2026年7月：GSAP 继续保持领先的 Web 动画库地位，开发活跃
5 步快速上手
5 步完成配置，开始使用
5 步快速上手
5 步完成配置，开始使用
1
通过 npm 安装
使用 npm 或 yarn 将 GSAP 添加到项目。
npm
npm install gsap2
导入 GSAP
在 JavaScript 文件中导入 GSAP。
JavaScript
import { gsap } from "gsap";3
创建基础动画
用简单的 tween 动画任何元素。
JavaScript
gsap.to(".box", { x: 200, duration: 1, rotation: 360 });4
添加 ScrollTrigger
基于滚动位置触发动画。
JavaScript
gsap.to(".section", { scrollTrigger: ".section", y: -100, opacity: 1 });5
构建时间线
用时间线编排多个动画。
JavaScript
const tl = gsap.timeline(); tl.to(".a", { x: 100 }).to(".b", { y: 50 });
