gsap-performance

gsap-performance 技能概覽

gsap-performance 技能是 GSAP 的效能指引集合，專門用來讓動畫更快、更順、更不容易卡頓。當你已經知道動畫目標，但需要為 Frontend Development 挑選成本最低的實作方式時，它最有幫助。它的核心任務是：在可行時讓動效留在 compositor 上運作、避免 layout thrashing，並減少會拖垮 60fps 的高繪製成本工作。

誰適合使用 gsap-performance

如果你正在調校現有的 GSAP 動畫、檢視一個動效很重的 UI，或是在判斷某個提案動畫是否適合上線，就很適合用 gsap-performance。它特別適合前端工程師、UI 開發者，以及需要效能意識答案、而不是泛用動畫提示的 AI 輔助程式撰寫流程。

它能幫你判斷什麼

這個技能可以幫你在 transform 動畫與 layout 動畫之間做選擇，理解什麼時候 will-change 真的有用，以及辨識何時把讀取與寫入批次化很重要。也因此，gsap-performance 特別適合用在真正的問題不是「我該怎麼做動畫？」而是「我該怎麼做動畫才不會掉幀？」的情境。

它在 GSAP 技術棧中的位置

gsap-performance 最適合搭配 gsap-core 來做基礎動畫建構，或在有捲動驅動動效時搭配 gsap-scrolltrigger 使用。如果你的問題主要是 timeline 結構或編排，而不是執行期成本，那麼其他 GSAP 技能可能會是更好的第一站。

如何使用 gsap-performance 技能

在正確的情境中安裝

如果你使用的是以目錄為基礎的技能設定，請用以下指令安裝：

npx skills add greensock/gsap-skills --skill gsap-performance

在你真正需要動畫指引的專案裡執行 gsap-performance install 這一步，然後在撰寫、審查或重構動效程式碼時使用這個技能。如果你同時在多個應用程式之間工作，就把它安裝在那個動畫負載最吃效能的專案中。

用效能導向的方式提問

gsap-performance usage 這種提問方式，在你提供動畫目標、被動畫化的屬性、執行環境和症狀時，效果最好。較弱的提問會說「讓它更順一點」。較強的提問會是這樣：「幫我把這個 GSAP 進場動畫最佳化成適合 mobile Safari；目前它在動畫 top 和 width，我想用同樣效果但更少 layout 成本的方式實作。」

可用的提問要素：

• 元素類型與數量，例如一張卡片、多個清單項目，或整個 hero 區塊
• 目前正在動畫化的屬性
• 瀏覽器或裝置上的疑慮
• 可見問題，例如卡頓、延遲、捲動不順或掉幀
• 任何限制，例如不能改 markup 或不能改視覺效果

以實務順序閱讀技能檔案

先從 SKILL.md 開始，因為裡面包含這個技能所依據的判斷規則。如果你要做安裝導向的檢視，請先看「何時使用這個技能」、「transform 與 opacity 的選擇」、「will-change」，以及「批次化讀寫」這幾個段落。如果你正在比較不同技能，也可以順手瀏覽相關的 GSAP 指引，避免硬把 gsap-performance 拿去處理它本來就不是要負責的 timeline 設計問題。

套用主要工作流程

這個技能的使用方式，是把動效目標轉成較便宜的 rendering 工作：

1. 如果視覺效果允許，把會觸發 layout 的動畫屬性改成 transforms。
2. 淡入淡出時使用 opacity，不要去動畫會造成繪製成本的幾何變化。
3. 只有真的會動畫到的元素才加上 will-change: transform;。
4. 避免在同一個 hot path 裡交錯 DOM 讀取與寫入。
5. 不要只在桌機版 Chrome 上測試；要在你支援的最慢裝置或瀏覽器上重新驗證。

gsap-performance guide 最有幫助的時機，是你已經有一版動畫草稿，但需要在不改變外觀的前提下，讓它更省成本。

gsap-performance 技能 FAQ

gsap-performance 只適用於 Frontend Development 嗎？

是的，而且最相關的就是這一類。這個技能是針對瀏覽器渲染行為、DOM 動畫成本與 UI 流暢度而設計的。如果你的工作是後端、純資料處理，或和執行期動畫沒有直接關係，這個技能通常就不太適合。

它和一般提示詞有什麼不同？

一般提示詞可能只會用概括方式建議你「使用 transforms」，但 gsap-performance 會給你更可靠的 GSAP 動效決策路徑。當你需要的是實際取捨時，這一點就很重要，例如：改用 transforms 來保留設計，還是值得付出 layout 變更的成本。

初學者一定要先很懂 GSAP 嗎？

不一定，但你至少要有具體的動畫目標。這個技能最好用的時候，是你能清楚描述元素、動作和痛點。如果你還在學 GSAP 基礎，建議先搭配 gsap-core 一起用，而不是期待 gsap-performance 從零教你動畫語法。

什麼時候不該用 gsap-performance？

如果問題不是效能，或主要問題是編排、順序控制、捲動邏輯，而不是 rendering 成本，就先不要用它。當你需要的是完整的視覺動畫規格時，它也不是第一選擇；它最擅長的是最佳化與實作指引，而不是創意方向。

如何改進 gsap-performance 技能

提供更清楚的前後目標

gsap-performance 最好的結果，來自明確的限制：哪些視覺效果必須保持不變、哪些可以調整、以及哪一類裝置最重要。例如，「保留卡片展開的風格，但消除 layout shift 並減少 mobile Safari 卡頓」會比「讓它更快」更有可操作性。

把真正的瓶頸講出來

常見的失敗模式，是要求技能優化錯誤的部分。如果瓶頸是很重的陰影、很大的 blur、太多動畫元素，或昂貴的 scroll handlers，就直接指出來。你越精準地標出成本來源，gsap-performance usage 給出的建議就越有用。

用具體測試案例反覆驗證

第一次輸出後，先在最小可重現案例上驗證，再逐步擴大。如果動畫在單一元素上看起來正常，但在 30 個清單項目上就失敗了，那就要改問批次處理、順序安排，或能減少每幀工作量的屬性調整。這正是 gsap-performance skill 最有價值的地方：不是替你發明動畫，而是讓真實版本足夠安全、可以上線。