动画参数 Vars

第二个参数（fromTo 则是第三个）叫 vars：一半是「要变成什么样」，一半是「怎么播」。特殊键名（duration、ease、onComplete…）不会被当成 CSS。

控制类属性

属性	类型	默认	说明
`duration`	Number	0.5	秒。可用 `gsap.defaults({ duration: 1 })` 改全局默认
`delay`	Number	0	开始前等待。时间线上更推荐用位置参数 `"<" / ">" / "+=0.2"`
`ease`	String	power1.out	见缓动文档。线性写 `"none"`
`repeat`	Number	0	额外播放次数；`-1` 无限
`repeatDelay`	Number	0	每次重复之间的停顿
`yoyo`	Boolean	false	播完倒着播回来，必须配合 repeat
`yoyoEase`	String	—	回程用另一套缓动
`paused`	Boolean	false	创建后先暂停，等 `.play()`
`immediateRender`	Boolean	from 为 true	是否立刻渲染 from 帧；延迟入场常设 false
`overwrite`	Boolean/String	false / auto*	`true` 杀掉该目标上旧 tween；`"auto"` 只抢冲突属性
`stagger`	Number/Object	0	多目标错开，见 Stagger 页
`id`	String	—	给 tween 起名，便于 `gsap.getById()`

* GSAP 3 默认 overwrite 为 false；很多项目会 gsap.defaults({ overwrite: "auto" })。

回调生命周期

回调	触发时机
`onStart`	真正开始播（过完 delay 之后）
`onUpdate`	每一帧，适合读 `gsap.getProperty` 或同步进度条
`onRepeat`	每一次 repeat 开始时
`onReverseComplete`	倒放到头
`onComplete`	正向播完（无限 repeat 不会到这里）
`onInterrupt`	被 kill / overwrite 打断

配套还有 callbackScope、onCompleteParams 等，现代代码更常用箭头函数闭包。

repeat + yoyo + repeatDelay

无限往返。停止时务必 killTweensOf，否则切页后仍在跑。

YOYO

gsap.to("#box5", {
  x: 420,
  duration: 1.4,
  repeat: -1,       // 无限
  yoyo: true,       // 回程
  repeatDelay: 0.25,
  ease: "power2.inOut"
});

回调：onStart / onUpdate / onComplete

onUpdate 很频繁，不要在里面做重 DOM 查询以外的昂贵计算。

gsap.to("#box6", {
  x: 420,
  duration: 2,
  onStart: () => log("start"),
  onUpdate: () => {
    const x = gsap.getProperty("#box6", "x");
    log("x = " + x.toFixed(1));
  },
  onComplete: () => log("complete")
});

delay vs 时间线位置

单个 tween 用 delay 没问题；一旦要编排多段，把 delay 换成 Timeline 位置参数会清晰得多。

gsap.to("#el", { x: 300, duration: 1, delay: 0.8 });

// 时间线上等价写法（推荐）
tl.to("#el", { x: 300, duration: 1 }, "+=0.8");