gsap-scrolltrigger

gsap-scrolltrigger 技能總覽

gsap-scrolltrigger 的功能

gsap-scrolltrigger 技能可幫你用 GSAP 的 ScrollTrigger 外掛建立與捲動連動的動畫：在捲動時啟動與停止動畫、釘住區塊、讓進度跟著捲軸走，並在精確的視窗位置觸發效果。當需求不是「做一個會動的東西」，而是「讓動畫以可控的方式回應捲動」時，它才是最合適的選擇。

適合哪些人使用

當你需要行銷頁、編輯版面、長篇敘事內容、產品展示，或依賴捲動位置的視差式動態效果時，請在 Frontend Development 中使用 gsap-scrolltrigger 技能。如果使用者只想要一個通用的動畫提示，而不在意捲動行為、時間點或釘住效果，那麼只有在這些細節真的重要時，這個技能才會更有價值。

這個技能的差異在哪裡

它最大的差異在於實用的捲動控制：start、end、scrub、pin 和切換行為能帶來可預期的結果，這些用一般提示詞很難清楚表達。當你想要的是 GSAP 的具體建議，而不是與函式庫無關的動畫答案時，gsap-scrolltrigger 指南也特別有用。

如何使用 gsap-scrolltrigger 技能

正確安裝並載入

使用 npx skills add greensock/gsap-skills --skill gsap-scrolltrigger 執行技能安裝。實作上，先載入 GSAP 與 ScrollTrigger 外掛，然後只需註冊一次：gsap.registerPlugin(ScrollTrigger);。如果是在 AI 工作流程中使用這個技能，請確保提示詞要求的是 ScrollTrigger 專用輸出，而不是泛用的 CSS 動畫建議。

提供正確的輸入

最好的 gsap-scrolltrigger usage 會從一個具體的捲動情境開始：哪個元素要動畫、進場時要發生什麼、動畫是否要跟著捲動同步、區塊是否要釘住，以及使用者往回捲時該怎麼處理。好的提示詞要具體，例如：「建立一個釘住的 hero 區塊，標題在區塊從 top center 捲到 bottom center 時淡入，圖片從 0.9 縮放到 1.1。」

先閱讀儲存庫檔案

先從 SKILL.md 開始，再查看完整檔案樹，找出任何連結的範例或實作筆記。對這個儲存庫來說，核心價值就在主指南本身：何時使用外掛、如何註冊，以及範例中的 trigger 設定。如果你要把這個模式改寫進其他程式碼庫，請把 trigger 設定對應到你所用框架的生命週期與 DOM 存取規則。

用模式思考，不要只抄範例

gsap-scrolltrigger install 與使用流程真正有用的地方，是理解設定邏輯，而不是盲目複製程式碼。要保留 trigger 元素、視窗位置與動作行為之間的關係。若要輸出可上線的成品，請要求可及性檢查、prefers-reduced-motion 的退化方案，以及當 pinning 會改變頁面流時的備用版面配置。

gsap-scrolltrigger 技能 FAQ

gsap-scrolltrigger 只適合進階動畫嗎？

不是。只要效果依賴捲動位置，它也很適合做初學者友善的捲動特效。主要學習曲線在於理解 trigger、start、end 和 scrub 如何一起運作。

什麼情況下不該使用這個技能？

如果需求只是單純的進場動畫，且不需要依賴捲動，就不要用 gsap-scrolltrigger；如果專案已經統一使用另一套動態效果函式庫，也不必硬套。當頁面必須在沒有 JavaScript 捲動邏輯的情況下仍能完整運作時，它也不是好選擇。

它和一般提示詞相比如何？

一般提示詞可能只描述視覺目標，卻漏掉讓 ScrollTrigger 穩定運作的實作細節。當你需要具體的捲動行為、更清楚的術語，以及更少的猜測來完成效果串接時，gsap-scrolltrigger skill 會更好。

它適用 React、Vue 或純 JavaScript 嗎？

可以，但整合細節不同。當你已經知道目標技術堆疊，並能明確告訴模型要產出純 JavaScript、元件式程式碼，或符合框架生命週期安全的處理方式時，這個技能的效果最好。

如何改進 gsap-scrolltrigger 技能

先把捲動契約講清楚

最大的品質提升，來自把捲動契約定義清楚：動畫什麼時候開始、什麼時候結束、是否要 scrub、是否要 pin。不要只說「做一個很酷的視差區塊」，而是說「把這個區塊釘住一個 viewport，讓圖片向上 scrub，並在圖片越過中心後讓說明文字淡入」。

先描述版面限制

請先提到 sticky header、動態內容高度、手機斷點，以及該區塊是否必須避免版面跳動。這些條件對 gsap-scrolltrigger guide 的輸出影響，往往比視覺風格更大，因為 ScrollTrigger 的行為取決於頁面實際幾何。

請求能避免返工的實作細節

在需要時，要求程式碼包含 cleanup、refresh 時機與 reduced-motion 處理。常見失敗模式包括：使用了錯的 trigger 元素、在小型內容區塊過度使用 scrub，或忘記 pinning 會改變文件流。更好的輸入能減少這些問題，讓第一次輸出更接近可交付版本。

用真實內容範例迭代

第一版完成後，請提供實際的區塊名稱、文案長度與圖片尺寸，讓動畫能配合內容微調。Frontend Development 中最有用的 gsap-scrolltrigger 輸出，通常都會再根據真實 markup 修正一次，因為 trigger 時機與 pin 持續時間取決於最終 DOM，而不只是概念本身。