GSAP Animation

GSAP 动画

缓动、交错、时间轴、滚动触发——Web 动效的专业词汇，附可交互演示。

9 个词条

Easing

控制动画在时间上的快慢分布：同样的起点、终点和时长，换一条缓动曲线，运动的性格就完全不同。

Stagger

让一组元素依次错开开始时间播放同一段动画，形成波浪、扩散、逐个出现的节奏感，是列表和网格入场的常用手法。

Timeline

把多个补间放进一条可整体控制的时间线，用位置参数精确安排先后与重叠，再统一播放、暂停、倒放或跳转。

ScrollTrigger

GSAP 的滚动插件：元素滚入视口时触发动画，或用 scrub 把动画进度直接绑定到滚动位置，还能固定元素做分段叙事。

SplitText

用 GSAP 的 SplitText 把文本拆成行、单词或字符，再对每一片单独做动画，实现逐字浮现、按行遮罩滑入等排版动效。

FLIP

先记录元素当前位置，直接修改 DOM 布局，再从旧状态平滑过渡到新状态；GSAP 的 Flip 插件把这套流程封装成两步调用。

DrawSVG

逐步显示或隐藏 SVG 元素的描边，做出线条被「画出来」的效果；GSAP 的 DrawSVG 插件用百分比控制描边可见的区段。

MorphSVG

让一个 SVG 路径平滑变成另一个形状；GSAP 的 MorphSVG 插件会自动处理两条路径锚点数量不同的问题。

Yoyo & Repeat

用 repeat 控制动画额外重复的次数，-1 表示无限循环；再配合 yoyo 让每次重复时正反交替播放，形成来回往返。