GSAP GALLERY专业级动画编排
DEMOS

GSAP

GreenSock Animation Platform · 40+ 张真实可交互卡片，覆盖 Timeline / Stagger / CustomEase / ScrollTrigger / Draggable+Inertia / Flip / MotionPath / SplitText / ScrambleText / Physics2D / MorphSVG / Observer

gsap@3.12.5100% 免费2025 Webflow 收购后全插件开放
01 / TIMELINE

Timeline 编排

gsap.timeline() 把多条 tween 串成精确到毫秒的时间轴：相对位置重叠、labels 跳转、yoyo 循环、父子嵌套时间轴。

顺序编排 + 重叠
"-=0.35" 相对位置参数做重叠
Yoyo 无限循环
repeat:-1, yoyo:true 往返播放
Labels 跳转
tl.seek("label") 立即跳到指定标签
嵌套子时间轴
parent.add(childTimeline) 分组并行
02 / STAGGER

Stagger 交错动画

同一批元素施加统一 tween 时错开起始时间，可指定方向（from）、网格分布（grid）、随机化（random）。

从中心扩散
stagger.from:"center", grid:[4,8]
从两端扩散
stagger.from:"edges"
波浪 3D 交错
rotationX + stagger.each 制造波浪
03 / EASE

缓动曲线 & CustomEase

内置数十种缓动函数呈现不同运动质感；CustomEase 还能把任意手绘 SVG 曲线转换成可用的 ease 字符串。

内置缓动对比
power / back / elastic / bounce / circ
CustomEase 手绘曲线
CustomEase.create() 注册自定义曲线
Elastic / Back / Bounce 切换
点按钮切换单条曲线的运动质感
04 / SCROLLTRIGGER

ScrollTrigger · 滚动触发全家桶

把 tween 绑定到滚动进度：进入视口渐显、pin+scrub 横向画廊、batch 批量入场、滚动映射 SVG 描边、整页滚动进度环。

渐显 + 向上回滚复位
toggleActions: "play none none reverse"
Panel A
Panel B
Batch 批量入场
ScrollTrigger.batch() 滚动一批一起触发
滚动映射 SVG 描边
scrub:true 把描边进度直接绑定滚动条
Pin + Scrub 横向画廊（Apple 产品页经典效果）
pin:true 钉住舞台，scrub:true 把位移直接映射滚动条位置，向下滚动此卡片查看
01 · TIMELINE
02 · SCROLLTRIGGER
03 · DRAGGABLE
04 · FLIP
05 · MORPHSVG
05 / DRAGGABLE

Draggable + InertiaPlugin

任意元素变为可拖拽对象；配合 InertiaPlugin 记录松手瞬间速度，转换为「抛出」减速滑行，而非硬停。

惯性拖拽
bounds + inertia:true
拖我
拖拽滑块
type:"x", bounds 限制在轨道内
50
滑动删除卡片栈
超过阈值 onDragEnd 自动飞出
拖拽排序列表
Draggable + Flip 让其余项平滑让位
06 / FLIP

Flip 布局翻转动画

Flip.getState() 记录旧位置，改变 DOM 后 Flip.from() 自动补间「旧 → 新」，无需手写坐标计算。

打乱重排
Flip.getState → 重排 DOM → Flip.from
网格密度切换
4 列 ↔ 6 列自动过渡
展开 / 收起卡片
Flip 让高度变化也平滑过渡
点击展开详情
共享元素模态框
缩略图 Flip 成全屏面板（经典模式）
07 / TEXT & PATH

文字 & 路径动画

TextPlugin 打字机、SplitText 逐字弹入与逐行遮罩、ScrambleTextPlugin 解码、MotionPathPlugin 沿任意 SVG 路径运动。

TextPlugin 打字机
循环切换文案，逐字符补间
GSAP 是编程动画引擎
SplitText 逐字弹入
type:"chars", stagger + back.out

动画是一种语言

SplitText 逐行遮罩
type:"lines" + overflow:hidden 上滑揭示

遮罩逐行揭示效果
常用于官网大段文案入场

ScrambleTextPlugin 悬停解码
hover 触发字符高速闪烁再收敛
MotionPathPlugin 沿路径飞行
autoRotate 让元素朝向切线方向
08 / PHYSICS & MORPH

Physics2D & MorphSVG

velocity/angle/gravity 驱动的真实物理轨迹；任意两个 SVG path 之间智能插值形变。2025 年随 GSAP 全面免费开放。

粒子爆炸
Physics2DPlugin velocity+angle+gravity
重力弹跳球
连续 Physics2D 抛物线 + 触地反弹衰减
图标形状变形
MorphSVGPlugin 智能匹配锚点
MorphSVG 无限形变 Loader
同一 path 在多个 blob 形状间循环插值
09 / OBSERVER & UI

Observer & GSAP 驱动的真实 UI 组件

Observer 统一手势/滚轮/触摸方向；这一区的每个常见 UI 微交互（磁性按钮、涟漪、Tab、手风琴、Toast、Dock、跑马灯、里程表）动效都由 GSAP 而非 CSS transition 驱动。

Observer 手势翻页
wheel / touch / pointer 统一方向回调
PAGE 1
磁性按钮
quickTo 让按钮朝光标方向偏移
点击涟漪
gsap.fromTo scale+opacity 生成扩散波
滑动 Tab 指示器
gsap.to 计算目标 x/width 精确对齐
手风琴
动态测量 scrollHeight 后补间
Toast 通知栈
timeline 入场 + 定时自动退场
Mac Dock 放大
quickTo 按鼠标距离连续缩放
无限跑马灯
xPercent -50 repeat:-1，hover 暂停
数字里程表
gsap.to 代理对象数值 + onUpdate 刷新
0