gsap-performance

GSAP 效能

何時使用此技能

在最佳化 GSAP 動畫以達到流暢 60fps、減少版面/繪製成本，或當使用者詢問效能、卡頓或快速動畫的最佳做法時使用。

相關技能： 使用 gsap-core（transform、autoAlpha）和 gsap-timeline 建立動畫；ScrollTrigger 效能相關請見 gsap-scrolltrigger。

優先使用 Transform 和 Opacity

動畫 transform（x、y、scaleX、scaleY、rotation、rotationX、rotationY、skewX、skewY）和 opacity 可將工作保留在合成器上，避免版面變更和大部分繪製。當 transform 能達到相同效果時，避免動畫版面密集型屬性。

• ✅ 優先使用：x、y、scale、rotation、opacity。
• ❌ 盡量避免：width、height、top、left、margin、padding（它們會觸發版面變更並可能導致卡頓）。

GSAP 的 x 和 y 預設使用 transform（translate）；移動時請使用它們而非 left/top。

will-change

在 CSS 中對將要動畫的元素使用 will-change。它提示瀏覽器提升圖層。

will-change: transform;

批次讀取與寫入

GSAP 內部會批次處理更新。當混合使用 GSAP 與直接 DOM 讀取/寫入或依賴版面的程式碼時，避免交錯讀取和寫入導致重複的 layout thrashing。建議先完成所有讀取，再進行所有寫入（或讓 GSAP 一次性處理寫入）。

大量元素（Stagger、列表）

• 當動畫相同時，使用 stagger 而非多個帶手動延遲的個別 tween；這樣更有效率。
• 對於長列表，考慮 虛擬化 或僅動畫可見項目；避免同時建立數百個 tween 導致卡頓。
• 盡可能重複使用 timeline；避免每影格建立新的 timeline。

頻繁更新的屬性（例如滑鼠跟隨器）

對於經常更新的屬性（例如滑鼠跟隨器的 x/y），優先使用 gsap.quickTo()。它重複使用單一 tween，而非每次更新都建立新 tween。

let xTo = gsap.quickTo("#id", "x", { duration: 0.4, ease: "power3" }),
    yTo = gsap.quickTo("#id", "y", { duration: 0.4, ease: "power3" });

document.querySelector("#container").addEventListener("mousemove", (e) => {
  xTo(e.pageX);
  yTo(e.pageY);
});

ScrollTrigger 與效能

• pin: true 會提升固定元素；僅固定需要的部分。
• scrub 使用較小值（例如 scrub: 1）可減少滾動時的工作量；在低階裝置上測試。
• 僅在版面實際變更時（例如內容載入後）呼叫 ScrollTrigger.refresh()，而非每次調整大小；盡可能防抖。

減少同時進行的工作

• 當動畫不在畫面中時（例如使用者導航離開），暫停或終止離螢幕或非活躍的動畫。
• 避免同時對大量元素的大量屬性進行動畫；必要時簡化或排序。

最佳做法

• ✅ 動畫 transform 和 opacity；僅在實際動畫的元素上使用 CSS 的 will-change。
• ✅ 當動畫相同時，使用 stagger 而非多個帶手動延遲的個別 tween。
• ✅ 對於頻繁更新的屬性（例如滑鼠跟隨器），使用 gsap.quickTo()。
• ✅ 清理或終止離螢幕動畫；當版面變更時呼叫 ScrollTrigger.refresh()，並盡可能防抖。

不要做的事

• ❌ 當 x/y/scale 能達到相同視覺效果時，不要為了移動而動畫 width/height/top/left。
• ❌ 不要「以防萬一」在每個元素上設定 will-change 或 force3D；僅用於實際動畫的元素。
• ❌ 未在低階裝置上測試前，不要建立數百個重疊的 tween 或 ScrollTrigger。
• ❌ 忽略清理；殘留的 tween 和 ScrollTrigger 會持續執行，損害效能與正確性。