实例控制与全局工具

gsap.to() 的返回值是 Tween。存下来才能暂停、倒放、改速度。在 React/Vue 里还要用 gsap.context() 统一清理。

Tween 实例方法

CTRL

const tween = gsap.to("#ctrlBox", {
  x: 420,
  rotation: 360,
  duration: 3,
  paused: true,  // 先造好，再手动 play
  ease: "none"
});

全局方法

API	用途
`gsap.killTweensOf(target)`	停掉某元素上所有 tween
`gsap.getProperty(el, "x")`	读当前动画值（比 getComputedStyle 准）
`gsap.delayedCall(s, fn)`	受 timeScale / 全局暂停影响的延时，比 setTimeout 更跟时间轴
`gsap.quickTo(el, "x", { duration: 0.4 })`	高频更新（鼠标跟随）专用，避免每帧 new tween
`gsap.defaults({ ease: "power2.out" })`	改默认 vars
`gsap.globalTimeline.pause()`	整页动画暂停（切后台、开模态）
`gsap.context(fn, scope)`	把里面创建的动画收进可 `revert()` 的桶
`gsap.matchMedia()`	按断点创建/销毁动画，自带 revert

quickTo：拖动鼠标（舞台内）

每次 mousemove 只更新目标值，内部复用同一个 tween，比反复 gsap.to 轻。

const xTo = gsap.quickTo("#ball", "x", { duration: 0.4, ease: "power3" });
const yTo = gsap.quickTo("#ball", "y", { duration: 0.4, ease: "power3" });
stage.addEventListener("pointermove", (e) => {
  const r = stage.getBoundingClientRect();
  xTo(e.clientX - r.left - 32);
  yTo(e.clientY - r.top - 32);
});

context 示例（注释即可，本页不跑 React）

// React useLayoutEffect
let ctx;
useLayoutEffect(() => {
  ctx = gsap.context(() => {
    gsap.from(".card", { y: 40, stagger: 0.08 });
  }, rootRef);          // 选择器相对这个根节点
  return () => ctx.revert(); // 卸载时还原内联样式并 kill
}, []);