gsap-frameworks

gsap-frameworks 技能概覽

gsap-frameworks 是做什麼的

gsap-frameworks 是給 Vue、Nuxt、Svelte、SvelteKit，以及其他非 React 元件框架使用的 GSAP 技能。它幫你寫出符合生命週期時機、選擇器作用範圍與清理機制的動畫程式，讓效果在 mount 之後能正確運作，也能在 unmount 時乾淨移除。

誰適合安裝這個技能

如果你正在元件框架中做 Frontend Development 動畫，而且需要比一般提示詞更可靠的結果，就適合安裝 gsap-frameworks。當你的需求涉及 onMounted、onUnmounted、onMount、onDestroy、元件 refs，或單一元件內的 DOM 範圍控制時，這個技能特別合適。

它能幫你避開什麼問題

gsap-frameworks 的主要價值，是避免常見的框架整合錯誤：在 DOM 還沒存在前就開始動畫、路由切換後還殘留 ScrollTriggers 或 tweens、以及不小心選到元件外的元素。如果你是在比較 gsap-frameworks 的安裝取捨，當你的輸出必須具備生命週期安全性與元件範圍限定時，這就是應該選的技能。

如何使用 gsap-frameworks 技能

先安裝並閱讀正確的檔案

使用 npx skills add greensock/gsap-skills --skill gsap-frameworks 安裝。接著先看 skills/gsap-frameworks/SKILL.md，因為那裡收錄了核心規則與各框架專屬模式。如果你是從 repo clone 下來作業，先讀同一個 skill 資料夾裡的範例，再開始寫程式。

把模糊需求轉成可用的提示詞

一個好的 gsap-frameworks usage 提示詞，應該同時說明框架、動畫目標，以及清理需求。例如：「建立一個 Vue 3 元件動畫，讓卡片在 mount 時淡入並滑入，使用 ref 和 onMounted，將 selector 範圍限制在元件根節點，並在 unmount 時清理。」這比「幫我讓這頁動起來」好得多，因為這個技能需要生命週期與結構細節，才能產出安全的程式碼。

提供這個技能真正需要的輸入

最好的 gsap-frameworks guide 輸入通常包括：框架版本、使用的是 composition API 還是 script setup、哪些元素要做動畫、偏好 selector 還是 refs、以及動畫是一次性、可逆，還是由捲動驅動。如果你也提到路由切換、SSR，或巢狀元件，這個技能就能避開在那些情境下會壞掉的寫法。

把 repository 當成模式來源來看

第一個要讀的檔案是 SKILL.md；如果你需要實作範例，就找那裡引用的框架範例段落，尤其是 Vue 和 Svelte 的模式。實務上，gsap-frameworks for Frontend Development 最適合被當成一個「重塑程式碼」的助理：把元件檔、你想要的動態效果，以及對清理、作用範圍或 SSR 的限制一起給它。

gsap-frameworks 技能 FAQ

gsap-frameworks 只有給 Vue 和 Svelte 用嗎？

不是。Vue 和 Svelte 是主要目標，但這份指引也適用於其他有 mount 與 unmount 階段的元件框架。如果你的框架有清楚的生命週期，且你需要元件範圍內的 GSAP，gsap-frameworks 通常都很適合。

什麼時候該改用 gsap-react？

React 專案請用 gsap-react。如果你的應用依賴 React hooks 和 useGSAP，gsap-frameworks 就不是正確選擇，因為 React 的模式和 Vue 或 Svelte 在清理與作用範圍處理上並不相同。

如果我已經懂 GSAP，還需要這個嗎？

需要，前提是你要做的是能安全整合進框架的動畫。懂 GSAP 的基本動畫語法，不代表就能自動處理生命週期時機、selector 作用範圍或 teardown。當動畫程式必須放進元件裡，而不是靜態頁面上時，gsap-frameworks 最有用。

這個技能適合初學者嗎？

適合，只要你能清楚描述元件與目標動畫。初學者通常卡住的地方，是漏掉框架細節或清理需求。如果你提供元件結構和想要的動態效果，這個技能就能引導出可行的實作方式。

如何改善 gsap-frameworks 技能

提供元件結構，不要只說效果

品質提升最大的一步，是把元件結構說清楚：有哪些元素、各有多少個、是否會條件式渲染。像「在 Nuxt 元件中用 refs 為三張功能卡片加動畫並確實清除 teardown」這種提示詞，會比「讓它順一點」產出更好的 gsap-frameworks 結果。

明確說出生命週期與清理需求

如果動畫只跑一次、要在路由切換時重跑，或離開頁面時要被 kill，請一開始就講明。當 gsap-frameworks 知道該使用只在 mount 設定、context 式作用範圍，或在 onUnmounted/onDestroy 中做明確清理時，表現最好。

把會改變實作方式的限制一起提供

當 SSR、hydration、動態列表、slot 內容，或巢狀子元件會影響結果時，請一併說明。這些細節能幫助技能避免脆弱的 selector 邏輯，也能判斷你的情境應該用 refs、元件根節點，還是包一層 wrapper element 比較安全。

先檢查第一次輸出的作用範圍與清理

最常見的失敗模式，是畫面看起來對了，但 selector 範圍太大，或 cleanup 不完整。若第一次回答已經接近你的需求，可以進一步要求更嚴格的元件範圍、更明確的 teardown，或改寫成完全符合你框架語法的版本。