效能

quickTo · 高效跟隨

滑鼠跟隨：每次 mousemove 新建 tween vs gsap.quickTo() 重用同一條。

導讀

高頻更新（mousemove）不要每次 gsap.to 新建。quickTo 回傳 setter，內部重用 tween。

看什麼
兩顆球跟隨指標；快速甩動時流暢度與 GC 壓力差異（概念上）。
怎麼試
調 duration / ease；對比左（to）右（quickTo）手感。
Skill 對應：gsap.quickTo, transform 優先, will-change
  • const xTo = gsap.quickTo(el, "x", { duration, ease })
  • 之後只需 xTo(clientX)，內部重用同一 tween
  • 高頻事件（mousemove / pointer）避免每次 gsap.to 新建
  • 動畫屬性優先 x/y/scale/rotation/opacity，少動 layout
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) => {
  xTo(e.offsetX); yTo(e.offsetY);
});
左: gsap.to 每次新建 · 右: quickTo

gsap.to（每次）

quickTo（重用）

在兩個區域內移動指標。右側應更穩定；參數改 duration / ease 後兩邊同步。