01
gsap.to()
从当前状态动画到目标状态 — 最常用的方法
gsap.to("#box", { x: 550, rotation: 360 })
02
gsap.from()
从指定状态动画到当前状态 — 做入场动画的利器
gsap.from(".box", { y: 80, autoAlpha: 0, stagger: .12 })
03
gsap.fromTo()
明确指定起点和终点 — 进度条、加载动画等精确控制
gsap.fromTo(".bar", { width: 0 }, { width: "100%", duration: 2 })
04
Stagger 交错
多个元素依次执行动画，形成波浪、扩散等效果
stagger: { amount: 0.6, from: "center" }
05
Easing 缓动
缓动决定动画的运动节奏 — 同时对比 10 种内置缓动
06
Timeline 时间轴
编排多步动画序列，支持暂停、倒放、跳转
07
Position Parameter
精确控制时间轴中每个动画的开始时间
tl.to(a, {x:500}, 0) .to(b, {x:400}, "<") .to(c, {x:300}, "-=0.2")
08
Labels 标签
给时间轴的关键帧命名，点击按钮跳转到不同标签
09
ScrollTrigger
滚动到指定位置时触发动画 — 向下滚动查看卡片飞入
Performance First
GSAP 使用 transform 和 opacity — GPU 加速属性，即使在低端设备也能保持 60fps 流畅。
Framework Agnostic
React、Vue、Svelte、Next.js、vanilla JS 通吃。一套 API，到处使用。
100% Free
自 Webflow 收购后所有插件免费 — SplitText、MorphSVG、Flip、Draggable 等，npm install gsap 即可。
10
Scrub 滚动绑定
动画进度完全跟随滚动条位置 — 滚动此区域看小球移动
11
Pin 固定
元素在滚动范围内固定不动 — 数字随滚动递增
12
Snap 吸附
拖拽小球，松手后自动吸附到最近的锚点
13
ScrollTrigger.batch()
批量滚动触发 — 同时进入视口的元素一起动画
14
Flip 布局动画
记录状态 → 改变布局 → 自动补间过渡
15
Draggable 拖拽
让元素可拖拽、可投掷 — 试试拖动下面的色块
16
MotionPath 路径运动
元素沿着 SVG 路径移动 — 小球沿轨道运行
17
SVG 描边绘制
逐步绘制 SVG 的笔画 — 模拟手绘效果
18
SplitText 文字拆分
将文字拆成字符逐个动画 — 模拟 SplitText 效果
19
ScrambleText 乱码
文字以乱码效果逐步揭示 — 模拟 ScrambleText 效果
20
ScrollToPlugin
平滑滚动到指定位置 — 点击按钮滚动到不同区域
gsap.to(window, { scrollTo: { y: "#target", offsetY: 60 }, duration: 1 })
21
Observer 手势检测
统一处理触摸/指针/滚轮事件 — 在灰色区域内滑动或滚轮
22
Inertia 惯性
拖拽并快速释放 — 小球会带着惯性滑动然后减速停下
23
CustomEase 自定义缓动
用贝塞尔曲线定义任意运动节奏 — 对比三种自定义缓动
hop (跳跃)
smooth (丝滑)
wobble (摇晃)
24
gsap.quickTo() 高频更新
为鼠标跟随等高频场景优化 — 在下方区域移动鼠标
gsap.quickTo("#cursor", "x", { duration: 0.4 })
25
gsap.matchMedia()
根据屏幕尺寸运行不同动画 — 试试缩放浏览器窗口
条件不匹配时动画自动清理，匹配时重新运行
26
gsap.utils 工具函数
纯函数工具集 — 实时计算结果
27
Performance 性能对比
transform（GPU）vs layout 属性（CPU） — 观察运动流畅度差异
推荐: x/y/scale/rotation (合成层) | 避免: width/height/top/left (触发重排)