用 GSAP 演示 GSAP
这里的每一次 移动、停顿 都在说话。
MOTION LAB 是一座交互式实验室——页面上你看到的所有动画，都由 GSAP 亲手驱动。往下滚动，逐一拆解它最迷人的能力：缓动曲线、时间轴编排、交错、滚动触发、拖拽物理与路径运动。
向下滚动开始
01 / EASING
缓动，是动画的语气
同样的距离，不同的缓动函数走出完全不同的性格。点击切换，右侧方块实时运动，左侧曲线同步绘制。
progress → value
time →
当前缓动：power2.out · 点击上方标签或色块重播
02 / TIMELINE
时间轴：把动作编成剧本
timeline() 让多个动画按顺序、重叠或错位发生，并可整体播放、倒放、跳转。拖动进度条手动清扫。
0%
03 / STAGGER
交错：让一群元素有节奏
一个 stagger 参数，就能让几十个元素依次登场。切换起点：从头、从中心、从边缘或随机。
04 / SCROLLTRIGGER
把滚动条变成时间轴
scrub 让动画进度与滚动位置绑定。下方色块的旋转与缩放完全由你的滚动驱动，背景层做视差。
SCROLL TO SCRUB
ease
scrub
pin
stagger
timeline
progress 0%