🎬 GSAP AI Skills
GreenSock 官方出的動畫技能包，教 AI 怎麼寫卷動特效、進場動畫。業界標準動畫引擎，現在全部功能完全免費。
📅 發布：2026-08-26 ｜ 🔄 最後更新：2026-08-26
一句話定位：讓 AI 員工直接學會怎麼正確寫 GSAP 動畫，卷動觸發特效、進場動畫一句話就生成
為什麼用
想幫網站加卷動動畫、進場特效，過去有兩個卡點：GSAP 本身要花時間讀文件學語法；以前部分進階外掛（例如 SplitText、MorphSVG）要付費才能用。
Webflow 收購 GSAP 之後，所有外掛全部免費，包含以前要付費的進階外掛，商用也可以。GSAP AI Skills 是 GreenSock 官方出的技能包，直接教 AI 工具（Claude Code、Cursor、Codex 等）正確的 GSAP 用法：核心 API、時間軸、卷動觸發（ScrollTrigger）、外掛用法、React／Vue／Svelte 整合，不用你自己去讀文件現學。
特別適合不用 React 的純靜態網站 — 卷動觸發動畫（滑到哪裡動畫就出現）是它最強的地方。
Cassie 怎麼用
這套技能包已經裝在她的系統裡，拆成好幾個子技能：核心 API（gsap-core）、時間軸（gsap-timeline）、卷動觸發（gsap-scrolltrigger）、外掛（gsap-plugins）、效能優化（gsap-performance）、React 整合（gsap-react）等。做網站設計時跟 AI 員工說要加動畫，AI 員工會自動呼叫對應的技能。
「個人網站一日系統」教學裡把它列為動效模組的推薦工具：想加卷動動畫、進場特效，跟 Claude Code 說「幫我裝 gsap-skills」就會自動學會怎麼用，特別適合靜態網站路線（不用 React 也能跑）。
對位 Cassie 系統
| 用途 | 對應方式 |
|---|---|
| 網站生成設計、加微互動 | flow-uiux-design skill、motion-design skill |
| 卷動特效、進場動畫 | gsap-scrolltrigger、gsap-timeline 等子技能 |
| React 專案裡用 GSAP | gsap-react skill |
| 個人網站一日系統教學（靜態路線） | 動效模組直接對應這套技能包 |
安裝
用 skills CLI 一次裝好（支援 Cursor、Claude Code、Codex、Windsurf、Copilot 等 40+ 工具，會自動偵測你在用哪個）：
npx skills add https://github.com/greensock/gsap-skillsClaude Code 也可以直接用技能市集：
/plugin marketplace add greensock/gsap-skills不會打指令？複製這句話給你的 AI 員工（Claude Code）就好：
「幫我裝 gsap-skills，跑
npx skills add https://github.com/greensock/gsap-skills。」
學員實戰範例
場景：想幫銷售頁加卷動觸發的進場動畫
- 跟 AI 員工說「幫我做設計」或「幫我這個區塊加卷動動畫，滑到哪裡文字就淡入」
- AI 員工呼叫
gsap-scrolltrigger技能，寫出正確的 ScrollTrigger 設定 - 卷動頁面時，區塊照你要的效果依序出現，不用你自己調參數
場景：不確定要不要用 React，但想要滑順的動畫效果
- 跟 AI 員工說「我要做靜態網站，但想要動畫效果好一點」
- AI 員工用 GSAP 核心 API 直接寫純 JS 動畫，不需要引入 React
- 拿到一個不依賴前端框架、卷動時觸發動畫的靜態頁面
相關工具
- 🛠️ 免費工具庫首頁 — 完整工具清單
- 🧠 Understand-Anything — 同樣是「AI 原生」技能包思路，這個處理的是整個程式碼庫理解