GSAP
正在加载动画引擎…
GreenSock 动画平台 · 100% 免费

万物 皆可动

一个框架无关的 JavaScript 动画库。构建可在所有主流浏览器中运行的高性能动画——CSS、SVG、Canvas、React、Vue、WebGL、颜色、运动路径……一切 JavaScript 能触及的对象。

0
网站使用
0
快于 jQuery
0
免费开源
0
依赖项
向下滚动
高性能 SCROLLTRIGGER 零依赖 SPLITTEXT 框架无关 MORPHSVG 1200万+网站 FLIP 跨浏览器兼容 MOTIONPATH 高性能 SCROLLTRIGGER 零依赖 SPLITTEXT 框架无关 MORPHSVG 1200万+网站 FLIP 跨浏览器兼容 MOTIONPATH
01 / 简介

动画超级英雄的
武器库

没有其他库能同时提供如此先进的序列编排、可靠性和精细控制,同时还能解决超过 1200 万个网站上的实际问题。

GSAP 能绕过无数浏览器兼容性问题——你的动画就是能正常运行。GSAP 的核心是一个高速属性操纵器,能以极高精度随时间更新数值。它的速度比 jQuery 快 20 倍!

CSS 动画 SVG 变形 Canvas 渲染 React / Vue WebGL 运动路径 颜色插值 字符串动画
02 / 核心特性

为什么选择 GSAP?

PERFORMANCE

极致性能

GSAP 的核心是一个高速属性操纵器,能以极高精度随时间更新数值。通过智能优化 GPU 加速属性,避免布局抖动,确保 60fps 流畅运行。

零依赖

完全灵活,可以在任何地方使用。不依赖任何其他库,体积小巧,加载迅速。

0
dependencies

ScrollTrigger

行业标准级滚动驱动动画插件,用极少代码实现令人惊叹的滚动效果。

行业标准

跨浏览器兼容

绕过无数浏览器兼容性问题,你的动画在所有主流浏览器中都能正常运行。

Chrome·Firefox·Safari·Edge
RESPONSIVE

响应式 & 无障碍

gsap.matchMedia() 让构建响应式动画变得轻而易举。自动处理不同屏幕尺寸的动画逻辑,支持 prefers-reduced-motion 无障碍偏好。

768px
平板
1024px
桌面
4K+
大屏
03 / ScrollTrigger 实战

滚动驱动的
动画叙事

向下滚动,体验 GSAP ScrollTrigger 的力量——固定、联动、视差,一切随你掌控。

SCENE 01

极少的代码

ScrollTrigger 让你用几行代码就能创建复杂的滚动动画。无需繁琐的事件监听,无需手动计算滚动位置。

gsap.to('.box', {
  scrollTrigger: {
    trigger: '.box',
    start: 'top center',
    scrub: true
  },
  rotation: 360,
  duration: 3
});
SCENE 02

固定 & 联动

将元素固定在视口中,同时驱动动画进度,创造沉浸式叙事体验。

SCENE 03

视差滚动

不同元素以不同速度移动,营造深度和空间感。每一层都有自己节奏。

多层视差 · 不同速度
SCENE 04

无限可能

从简单的淡入到复杂的时间线编排,ScrollTrigger 都能胜任。这就是行业标准的实力。

探索 ScrollTrigger
04 / 插件生态

强大的插件缓动函数

可选插件和缓动函数让你轻松实现高级效果——滚动、变形、文本拆分、运动路径、FLIP 动画……应有尽有。

ScrollTrigger

滚动动画

行业标准级滚动驱动动画。创建令人惊叹的滚动效果——固定、联动、视差、进度条,用极少的代码实现。

了解更多

SplitText

文本拆分

将文本拆分为字符、单词或行,实现逐字逐行的精细动画。创建引人注目的标题动画和文字效果。

了解更多

MorphSVG

SVG 变形

在任意两个 SVG 路径之间实现平滑变形动画。从圆形到星形,从简单到复杂,变形从未如此优雅。

了解更多

MotionPathPlugin

运动路径

让元素沿任意 SVG 路径运动。创建曲线飞行、轨道旋转、波浪前进等复杂运动轨迹。

了解更多

Flip

FLIP 动画

First-Last-Invert-Play 技术。在任何状态变化之间创建平滑过渡动画——列表重排、布局变化、视图切换。

了解更多

Observer

事件标准化

在浏览器和设备间标准化事件检测。统一处理鼠标、触摸、滚轮、指针事件,简化跨平台交互开发。

了解更多
05 / 安装与使用

三种方式,
即刻开始

无论你使用 CDN、NPM 还是模块打包器,GSAP 都能轻松集成到你的项目中。核心库包含所有实用方法和缓动函数。

100% 免费!

感谢 Webflow,GSAP 现在完全免费,包括所有高级插件如 SplitText、MorphSVG 以及其他 Club GSAP 会员专属功能。即使是商业用途也完全免费!

1

CDN 引入

HTML
<!-- GSAP 核心 -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/gsap.min.js"></script>

<!-- ScrollTrigger 插件 -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/ScrollTrigger.min.js"></script>
2

NPM 安装

Terminal
npm install gsap
3

模块导入

JavaScript
// 典型导入方式
import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";
import Flip from "gsap/Flip";
import Draggable from "gsap/Draggable";

// 别忘了注册插件
gsap.registerPlugin(ScrollTrigger, Draggable, Flip);
06 / 资源

学习与社区

让创意 不再受限

加入超过 1200 万个网站的开发者行列,用 GSAP 创造令人惊叹的动画体验。