gsap

gsap 技能總覽

gsap 技能能做什麼

gsap 技能是給 HyperFrames compositions 用的實作型 GSAP 動畫參考。它能幫你挑對 tween 類型、正確設定屬性，並建立在 production 裡也能穩定運作的 timeline。如果你要的是一份偏實作、而不是偏理論的 gsap 指南，這個技能的目標就是讓動畫更快跑起來，少一點反覆試錯。

這個技能最適合什麼情境

如果你在做進場動畫、motion transition、staggered sequence、以 timeline 驅動的場景，或可重複使用的動畫效果，就很適合用 gsap 技能。它特別適合 Design Implementation 的工作：你已經有視覺規格，需要把它轉成 gsap.to()、from()、fromTo() 或 gsap.timeline()，又不能把 timing 搞亂或覆蓋掉原本的屬性。

為什麼值得安裝

它最大的價值在於幫你做決策：該用哪個 GSAP API、哪些 vars 真的重要、哪些預設值可能造成 bug。這個技能也會帶出實務上的限制，例如 camelCase 屬性命名、immediateRender、transform aliases，以及像 will-change 和 quickTo 這種更有利於效能的寫法。當你需要的是能直接上線的成果時，gsap 技能會比通用 prompt 更有用。

如何使用 gsap 技能

安裝並檢視正確的檔案

安裝指令如下：

npx skills add heygen-com/hyperframes --skill gsap

先從 skills/gsap/SKILL.md 開始，再讀 references/effects.md 看現成模式；如果動畫會依賴音訊資料，也要看 scripts/extract-audio-data.py。這個 repo 很小，所以這幾個檔案很快就能讓你掌握實際使用情境。

提供具體的動畫需求

gsap 技能在提示詞包含元素、動作目標、時間設定與限制條件時，效果最好。不要只說「幫我做這張卡片動畫」，而是像這樣寫：Create a gsap entrance for a product card: fade in from 24px below, 0.6s duration, power3.out, stagger three cards by 0.12s, no layout shift, and avoid overwriting hover transforms. 這種輸入能幫技能選到合適的 gsap 用法，也能避免落入模糊預設值。

先讀會影響輸出品質的程式路徑

如果是實作工作，請優先看核心 tween 方法、常用 vars、transform/CSS 對應、function-based values 與 timelines 這幾段。這些內容最直接影響實際輸出品質。如果你要的是可重用的 motion pattern，先看 references/effects.md；那裡會說明這個 repo 預期怎麼組織 effects，以及 plugin 需求在哪些地方會變成關鍵。

使用能避免壞動畫的工作流程細節

盡量用 GSAP 的 transform aliases，不要直接手寫 transform 字串，並且在定時動作開始前先用 gsap.set() 完成即時狀態設定。串接 timelines 時，要有意識地使用 labels 和 position parameters，不要把所有東西都堆在同一個時間點。如果某個 tween 會反覆碰到同一個元素或屬性，就要留意 immediateRender 和 overwrite，不然 gsap 技能可能會做出肉眼可見的跳動。

gsap 技能 FAQ

這個 gsap 技能只適用於 HyperFrames 嗎？

它是為 HyperFrames compositions 寫的，不過 GSAP 的使用模式本身具有廣泛可移植性。就算不是在 HyperFrames 裡使用，你還是能從這些 API 指引中受益，只是 file structure 和 lifecycle handling 可能需要你自己調整。

我需要先有 GSAP 經驗嗎？

不需要。只要你知道想達成什麼動畫目標，但還不確定該用哪個 API，gsap 技能就很適合入門者。當然，如果你能清楚描述元素狀態、時間設定與順序，它的價值會更高，因為這些細節比單純一句「讓它順一點」更能產生好結果。

什麼情況下不該用它？

如果你只是要一次性的 CSS transition，或是 motion 很簡單，直接寫在 style sheets 裡就能完成，那就不必用這個技能。當你需要的是與 GSAP timelines 無關的自訂 runtime 架構，或需求根本沒有定義目標元素與想要的 motion 狀態時，它也不太適合。

它和一般 prompt 有什麼不同？

一般 prompt 常常只能產出一個看起來合理的動畫概念。gsap 技能在你需要正確的 GSAP 語法、更安全的預設值，以及符合實作現實的 timeline 行為時，會更有幫助。它能減少你在 gsap install 風格的上手流程、tween 選擇、屬性命名，以及效能敏感決策上的猜測空間。

如何改進 gsap 技能

提供視覺規格，不只是目標

最快提升 gsap 輸出品質的方法，就是把起始狀態、結束狀態、順序與限制條件說清楚。例如：Text should rise 20px and fade in over 0.5s, then the button scales from 0.96 to 1 with back.out(1.7), and both should respect reduced motion. 這樣能給技能足夠結構，產出更好的 gsap 使用方案。

明確指出元素與衝突風險

請把 selectors、元素數量，以及頁面上既有的 motion 一併說明。如果你知道某個屬性可能已經在別處被動畫化，也要直接講。最常見的失敗點往往不是 tween 本身，而是 overwrite 衝突或 transform 撞到一起，所以把這些風險先說出來，結果通常會立刻改善。

要求可直接實作的輸出

如果你要的是 Design Implementation 結果，第一輪就應該要求 timeline 順序、精確 vars，以及 plugin requirements。好的追問可以是「convert this to a reusable timeline」、「replace raw transforms with GSAP aliases」，或「optimize for performance and avoid layout thrash」。這些問法會把 gsap 技能推向 production-friendly code，而不是只停留在 demo motion。

一次只改一個變因來迭代

第一版完成後，每次只調整一個面向：timing、easing、staggering 或 structure。若動作太突兀，就要求放柔 ease；如果太慢，就縮短 duration；如果元素互相搶戲，就請求 overwrite: "auto" 或更清楚的 timeline labels。這樣可以讓 gsap 技能維持焦點，也讓下一版更容易判斷。