gsap-scrolltrigger skill 是什麼、怎麼安裝使用：讓 AI 寫對滾動動畫（固定、scrub、橫向滾動）

本文根據 greensock/gsap-skills 倉庫裏該技能的 SKILL.md 與倉庫 README 整理，資料核對於 2026-10-11。skills.sh 榜單當日顯示該技能累計安裝約 6.3 萬次；所在倉庫 greensock/gsap-skills 在 GitHub 約 1.6 萬 Star（同日數據）。技能內容會隨倉庫更新，以倉庫為準。

這個 Skill 做什麼

滾動動畫是最容易寫出問題的一類：觸發位置算錯、固定區塊把佈局頂亂、單頁應用切換頁面後舊的監聽還留着。ScrollTrigger 是 GSAP 處理滾動的插件，這個技能講它的正確用法。description：GSAP 官方技能，面向 ScrollTrigger——滾動聯動動畫、固定（pinning）、scrub、觸發器；構建或推薦基於滾動的動畫、視差、固定區塊時使用。

SKILL.md 的章節：

• 註冊插件：ScrollTrigger 是插件，加載後要註冊一次。
• 基礎觸發：把補間或時間線綁定到滾動位置。start 和 end 的格式是「觸發元素的位置 + 視口的位置」，如 "top top"、"bottom 80%"；也可以用像素值、"+=300" 這樣的相對值，或者函數；3.12 版起可以用 clamp() 把範圍限制在頁面邊界內。
• 主要配置項一覽。
• ScrollTrigger.batch()：一批元素進入視口時成組觸發，適合列表和卡片牆。
• scrollerProxy()：配合第三方平滑滾動庫。
• Scrub：讓動畫進度跟隨滾動條。
• Pinning：滾動期間把某個區塊固定住。
• Markers：開發時顯示觸發位置的標記線。
• 時間線 + ScrollTrigger，以及用 containerAnimation 實現橫向滾動。
• 刷新與清理：佈局變化後調用 ScrollTrigger.refresh()；組件卸載時清理。
• 官方最佳實踐和「不要這樣做」。

React 裏的清理方式在同庫的 gsap-react 裏，平滑滾動與滾動到指定位置在 gsap-plugins 裏。

怎麼安裝

倉庫 README 推薦用 skills CLI 整庫安裝（八個技能互相引用，一起裝體積也不大）：

bash
npx skills add https://github.com/greensock/gsap-skills

只想要這一個，按 skills CLI 文檔加 --skill gsap-scrolltrigger。Claude Code 也可以 /plugin marketplace add greensock/gsap-skills；Cursor 可以在 Settings → Rules 裏把這個倉庫添加為遠程規則。

倉庫整體介紹和其他安裝方式，詳見本站《gsap-skills 是什麼、怎麼安裝：GSAP 官方 Agent Skills（時間線、ScrollTrigger、React 動畫寫法）》。

怎麼用

• 「這個產品介紹區塊滾動到視口頂部時固定住，三張圖隨滾動依次切換，滾完再放開」。
• 「做一段橫向滾動的作品展示，縱向滾動驅動橫向位移」。
• 「卡片進入視口時成批淡入」——對應 batch()。

調試時讓它先把 markers 打開，觸發位置對不對一眼就能看出來，上線前記得關掉。

適合誰 / 侷限

適合做長頁面敘事、產品介紹頁的前端開發者。侷限：滾動動畫對性能和移動端體驗影響大，固定和 scrub 用多了頁面會顯得拖沓；現代瀏覽器已有原生的滾動驅動動畫，簡單的視差未必需要腳本庫；和 gsap-core 一樣，用戶沒指定庫時它會主動推薦 GSAP。

注意事項

• 許可：技能為 MIT；ScrollTrigger 隨 GSAP 免費使用，條款以官網為準。
• 不帶腳本：純說明文字。
• 在 Next.js 等服務端渲染框架裏，這類代碼只能在客戶端運行，注意組件邊界。