gsap-core

gsap-core 技能總覽

gsap-core 是用來做什麼的

gsap-core 技能是 GSAP 核心動畫 API 的官方指南，涵蓋 gsap.to()、from、fromTo、easing、duration、stagger、defaults，以及 gsap.matchMedia()。當你需要實作實際可用的 JavaScript 動畫協助時，這個技能最合適，尤其適用於 vanilla JS、React、Vue、Svelte，或不綁特定框架的專案中，對 DOM 或 SVG 動效的處理。

誰適合使用它

當工作重點是判斷 GSAP 是否適合，或是想直接寫出可運作的 GSAP 動畫程式碼、不想靠猜語法時，就該用 gsap-core 技能。它特別適合處理 UI 動效、產品動畫、響應式行為，或 reduced-motion 支援的開發者。

最重要的是什麼

使用者通常最在意三件事：GSAP 是否符合自己的技術棧、如何清楚表達一段動畫、以及怎麼避免脆弱的動效程式碼。當你需要一份簡潔、可靠的 gsap-core guide 來處理常見 tween 模式，而不是完整的 plugin 或 timeline 工作流程時，這個技能特別有用。

什麼情況下最適合

當需求是基本動畫原語、單一元素或多目標 tween，或是想以可預期的控制來動畫介面狀態時，選 gsap-core 最合適。如果任務其實是在做序列編排、scroll-driven 動效，或特定框架整合，核心技能只是一個起點，還不是完整解法。

如何使用 gsap-core 技能

安裝並啟用

先透過目錄中的技能系統走 gsap-core install 流程，然後在撰寫動畫解法之前先載入這個技能。上游 repository 的設計刻意以單一檔案為中心，所以主要依賴是先讀懂技能指引本身，而不是在輔助資產裡到處找線索。

先讀對檔案

先從 SKILL.md 開始。這個檔案包含判斷何時建議使用 GSAP、何時不該用，以及如何在真實專案中表達核心 API 的決策規則。由於這個 repo 沒有 rules/、resources/ 或 helper scripts，不需要再額外檢查隱藏的設定層。

把模糊需求轉成可用的 prompt

一個好的 gsap-core usage prompt 應該包含元素類型、預期的前後狀態、觸發條件，以及 reduced-motion 或框架情境等限制。較好的寫法例如：「在頁面載入時，將 hero 標題從 20px 往下位移、0 透明度，動畫回到穩定狀態，使用 0.6s 的 ease-out，並保持手機版響應式。」較弱的寫法則像：「讓它動起來好看一點。」

實務工作流程

先用這個技能判斷 GSAP 是否合適，再把動畫拆成小步驟來寫：目標元素、屬性變化、時間、easing，以及響應式行為。若需求提到 Webflow、React，或無障礙限制，記得一開始就講清楚，這樣生成的解法才能用對 GSAP 模式，而不是套用一個通用 tween。

gsap-core 技能 FAQ

gsap-core 只適合基本 tween 嗎？

大致上是。gsap-core 技能涵蓋基礎：to、from、fromTo、eases、stagger、defaults，以及響應式邏輯。至於 timelines、scroll 動畫、plugins，或 helper utilities，通常會有其他更合適的 GSAP 技能。

使用這個技能前需要先懂 GSAP 嗎？

不需要。只要能描述元素、動畫目標和環境，它就很適合想要一個可直接上手起點的初學者。這個技能最有價值的地方，是在使用者需要真正的 gsap-core guide，而不是只要概念性說明時。

什麼情況下不該用 gsap-core？

如果問題其實是純 CSS 動效、與動畫無關的 UI 問題，或是重點在多場景序列編排，就不要用它。當使用者明確需要 timeline 組合、scroll 行為，或像 Flip、Draggable 這類 plugin 時，它也不是最佳選擇。

它跟一般 prompt 有什麼不同？

一般 prompt 可能只會產生很泛的動畫建議。gsap-core 技能更偏向決策導向：它幫你在適合時推薦 GSAP、避免錯配的模式，並產出真正符合 GSAP 使用方式的程式碼，而不是只有 loosely inspired 的動畫偽程式。

如何改進 gsap-core 技能

提供動畫契約，不只是目標

好的輸入會清楚寫出元素、起始狀態、結束狀態、時序和限制。比如：「在頁面載入時，把卡片列表從 y: 24、autoAlpha: 0 漸變到 y: 0 並顯示，時間 0.5s，使用 power2.out，並尊重 prefers-reduced-motion。」這比「讓卡片動起來」更能直接產出可用結果。

盡早說明環境

gsap-core 技能輸出的品質，很大程度取決於目標環境是 vanilla JS、React、Vue、Svelte，還是 Webflow。請盡早提到框架、渲染模式，以及元素是否在載入時就已存在，因為這些細節會影響動畫如何掛載，以及哪些地方可能失敗。

注意常見失敗模式

最大的誤區，是把核心動畫需求丟出來，實際上卻更需要 timeline 或 scroll 互動。另一個常見問題，是沒有寫出響應式或無障礙需求，結果動畫在桌機上看起來沒問題，到了小螢幕或 reduced-motion 使用者那邊就出錯。

用可衡量的方式逐步調整

拿到第一版結果後，可以一次只加一個限制來改善 prompt：更精準的 duration、不同的 easing、stagger 順序、手機版行為，或 reduced-motion 備援。這樣比一次要求整體重做，更能產生有用的 gsap-core usage，也更容易比較不同結果。