Gsap — GSAP（GreenSock 动画平台）

GSAP HyperFrames 合约 HyperFrames 通过其 gsap 运行时适配器控制 GSAP。创建一个暂停的时间轴，同步注册它到 window.__timelines 中，使用确切的 data-composition-id，让 HyperFrames 寻找它。

核心 Tween 方法 gsap.to(targets, vars) — 从当前状态到 vars 动画。最常见。 gsap.from(targets, vars) — 从 vars 到当前状态（入口）动画。 gsap.fromTo(targets, fromVars, toVars) — 显式开始和结束。 gsap.set(targets, vars) — 立即应用（duration 0）。 始终使用 camelCase 属性名称（例如 backgroundColor、rotationX）。

常见 vars 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 — 有限的数字；在 HyperFrames 中永远不是 -1。 yoyo — 交替方向与重复。 onComplete、onStart、onUpdate — 回调函数。 immediateRender — 默认为 from() 和 fromTo() 的 true。将其设置为 false，以避免覆盖同一属性和元素的后续动画。

变换和 CSS 更喜欢 GSAP 的变换别名而不是原始变换字符串： GSAP 属性 等价于 x、y、z translateX/Y/Z（px） xPercent、yPercent translateX/Y（%） scale、scaleX、scaleY scale rotation rotate（deg） rotationX、rotationY 3D rotate skewX、skewY skew transformOrigin transform-origin autoAlpha — 更喜欢它而不是不透明度。在 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 — 在 1s 相对："+=0.5" — 在结束后；"-=0.2" — 在结束前 标签："intro"、"intro+=0.3" 对齐："＜" — 与前一个相同开始；"＞" — 在前一个结束后；"＜0.2" — 在前一个开始后 0.2s

标签 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 — vars 合并到每个子动画中。

嵌套时间轴 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" }),