GSAP 动画参考文档，面向 HyperFrames 使用场景，整理了 GSAP 的核心补间方法与时间线用法。
用途 文档作为动画编写的参考手册，用于在项目中快速查阅 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 字符串：x、y、z 对应 translateX/Y/Z（px）；xPercent、yPercent 对应百分比平移；scale、scaleX、scaleY；rotation 对应 rotate（度）；rotationX、rotationY 为 3D 旋转；skewX、skewY；transformOrigin。autoAlpha 优先于 opacity，为 0 时同时设置 visibility: hidden。支持 CSS 变量（"--hue": 180）、仅 SVG 可用的 svgOrigin（不要与 transformOrigin 同时使用）、方向性旋转（"360_cw"、"-170_short"、"90_ccw"）、clearProps（"all" 或逗号分隔，动画完成后移除内联样式）以及相对值（"+=20"、"-=10"、"*=2"）。函数式取值可按索引与目标生成值，例如 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" }) 设置全局默认。补间返回对象支持 pause()、play()、reverse()、kill()、progress(0.5)、time(0.2) 等控制。gsap.matchMedia() 可在媒体查询匹配时执行初始化、不再匹配时自动回退，适合响应式与 prefers-reduced-motion 无障碍适配。 时间线通过 gsap.timeline({ defaults: { duration: 0.5, ease: "power2.out" } }) 创建并链式调用 to()。位置参数为第三个参数：绝对值 1 表示 1 秒处；相对值 "+=0.5" 表示上一段结束后 0.5 秒，"-=0.2" 表示提前 0.2 秒；标签如 "intro"、"intro+=0.3"；对齐符号 "<" 表示与上一段同时开始，">" 表示上一段结束后，"<0.2" 表示上一段开始后 0.2 秒。标签可用 addLabel() 添加并用 play("outro")、tweenFromTo("intro", "outro") 跳转。时间线选项包括 paused: true、repeat、yoyo、defaults 合并到每个子补间，嵌套时用 master.add(child, 0) 添加。播放控制包括 play()、pause()、reverse()、restart()、time(2)、progress(0.5)、kill()。 性能建议：优先对 x、y、scale、rotation、opacity 做动画以留在合成层，避免用 width、height、top、left 实现本可由变换达到的效果；will-change: transform 只加在实际动画的元素上；高频更新使用 gsap.quickTo()，如鼠标移动中调用 xTo(e.pageX)；用 stagger 替代大量带手动延迟的独立补间；对屏幕外动画暂停或销毁。文档还列出参考文件 references/effects.md，按需加载打字机文字、音频可视化等即用效果。 使用方式 按需查阅对应章节，在代码中采用驼峰属性名、变换别名与 autoAlpha，优先用时间线与位置参数组织序列，为时间线传入 defaults，并在控制播放时保存补间或时间线的返回值。 适用场景 适用于网页动画开发中的入场效果、序列动画、响应式与无障碍动效、SVG 动画，以及需要高频更新的交互跟随等场景。 限制 资料未提供安装命令、版本信息、收费或许可方式，暂未提供。文档中的其他具体 API 细节以官方文档为准。