GSAP
核心补间方法
- gsap.to(targets, vars) — 从当前状态动画到
vars。最常用。 - gsap.from(targets, vars) — 从
vars动画到当前状态（入场效果）。 - gsap.fromTo(targets, fromVars, toVars) — 明确的起始和结束状态。
- gsap.set(targets, vars) — 立即应用（持续时间为 0）。
始终使用驼峰命名法的属性名（例如 backgroundColor、rotationX）。
通用变量
- duration — 秒（默认 0.5）。
- delay — 开始前的延迟秒数。
- ease —
"power1.out"（默认）、"power3.inOut"、"back.out(1.7)"、"elastic.out(1, 0.3)"、"none"。 - stagger — 数字
0.1或对象：{ amount: 0.3, from: "center" }、{ each: 0.1, from: "random" }。 - overwrite —
false（默认）、true或"auto"。 - repeat — 数字或
-1表示无限循环。yoyo — 与 repeat 结合，交替方向。 - onComplete、onStart、onUpdate — 回调函数。
- immediateRender — 对于 from()/fromTo() 默认为
true。在后续操作相同属性和元素的补间上设置为false以避免覆盖。
变换和 CSS
优先使用 GSAP 的变换别名，而非原始的 transform 字符串：
| GSAP 属性 | 等效属性 |
|---|---|
x、y、z | translateX/Y/Z (px) |
xPercent、yPercent | translateX/Y (%) |
scale、scaleX、scaleY | scale |
rotation | rotate (度) |
rotationX、rotationY | 3D 旋转 |
skewX、skewY | skew |
transformOrigin | transform-origin |
- autoAlpha — 优先于
opacity。值为 0 时：同时设置visibility: hidden。 - CSS 变量 —
"--hue": 180。 - svgOrigin (仅 SVG) — 全局 SVG 坐标空间原点。请勿与
transformOrigin结合使用。 - 定向旋转 —
"360_cw"、"-170_short"、"90_ccw"。 - clearProps —
"all"或逗号分隔的列表；动画完成时移除内联样式。 - 相对值 —
"+=20"、"-=10"、"*=2"。
基于函数的值
gsap.to(".item", {
x: (i, target, targets) => i * 50,
stagger: 0.1,
});
缓动函数
内置缓动函数：power1–power4、back、bounce、circ、elastic、expo、sine。每个都有 .in、.out、.inOut 变体。
默认值
gsap.defaults({ duration: 0.6, ease: "power2.out" });
控制补间
const tween = gsap.to(".box", { x: 100 });
tween.pause();
tween.play();
tween.reverse();
tween.kill();
tween.progress(0.5);
tween.time(0.2);
gsap.matchMedia()（响应式 + 可访问性）
仅在媒体查询匹配时运行设置；当不匹配时自动恢复。
let mm = gsap.matchMedia();
mm.add(
{
isDesktop: "(min-width: 800px)",
reduceMotion: "(prefers-reduced-motion: reduce)",
},
(context) => {
const { isDesktop, reduceMotion } = context.conditions;
gsap.to(".box", {
rotation: isDesktop ? 360 : 180,
duration: reduceMotion ? 0 : 2,
});
},
);
时间线
创建时间线
const tl = gsap.timeline({ defaults: { duration: 0.5, ease: "power2.out" } });
tl.to(".a", { x: 100 }).to(".b", { y: 50 }).to(".c", { opacity: 0 });
位置参数
第三个参数控制放置位置：
- 绝对时间：
1— 在 1 秒处 - 相对时间：
"+=0.5"— 在结束时之后；"-=0.2"— 在结束之前 - 标签：
"intro"、"intro+=0.3" - 对齐：
"<"— 与前一个同时开始；">"— 在前一个结束后开始；"<0.2"— 在前一个开始后 0.2 秒开始
tl.to(".a", { x: 100 }, 0);
tl.to(".b", { y: 50 }, "<"); // 与 .a 同时开始
tl.to(".c", { opacity: 0 }, "<0.2"); // 在 .b 开始后 0.2 秒开始
标签
tl.addLabel("intro", 0);
tl.to(".a", { x: 100 }, "intro");
tl.addLabel("outro", "+=0.5");
tl.play("outro");
tl.tweenFromTo("intro", "outro");
时间线选项
- paused: true — 创建时暂停；调用
.play()开始。 - repeat、yoyo — 应用于整个时间线。
- defaults — 将变量合并到每个子补间中。
嵌套时间线
const master = gsap.timeline();
const child = gsap.timeline();
child.to(".a", { x: 100 }).to(".b", { y: 50 });
master.add(child, 0);
播放控制
tl.play()、tl.pause()、tl.reverse()、tl.restart()、tl.time(2)、tl.progress(0.5)、tl.kill()。
性能
优先使用变换和透明度
动画化 x、y、scale、rotation、opacity 保持在合成器上。当变换能达到相同效果时，避免使用 width、height、top、left。
will-change
will-change: transform;
仅用于实际执行动画的元素。
高频更新使用 gsap.quickTo()
let xTo = gsap.quickTo("#id", "x", { duration: 0.4, ease: "power3" }),
yTo = gsap.quickTo("#id", "y", { duration: 0.4, ease: "power3" });
container.addEventListener("mousemove", (e) => {
xTo(e.pageX);
yTo(e.pageY);
});
使用 Stagger 替代多个补间
使用 stagger 而不是带有手动延迟的独立补间。
清理
暂停或停止屏幕外的动画。
参考资料（按需加载）
- references/effects.md — 即用型效果：打字机文本、音频可视化器。在需要为 HyperFrames 准备现成的效果模式时阅读。
最佳实践
- 使用驼峰命名法的属性名；优先使用变换别名和 autoAlpha。
- 优先使用时间线而不是通过 delay 进行链式调用；使用位置参数。
- 使用
addLabel()添加标签以实现可读的顺序。 - 将默认值传递给时间线构造函数。
- 在需要控制播放时，存储补间/时间线的返回值。
禁止事项
- 当变换足够时，不要动画化布局属性（width/height/top/left）。
- 不要在同一个 SVG 元素上同时使用 svgOrigin 和 transformOrigin。
- 当时间线可以实现顺序时，不要使用 delay 链式调用动画。
- 不要在 DOM 存在之前创建补间。
- 不要跳过清理 — 当不再需要时，务必停止补间。