Astro · Vanilla JS · Svelte · GSAP 3
GSAP 能做什麼？從核心到外掛一次練完
這是一套對應官方gsap-skills的可互動示範實驗室。不限於 ScrollTrigger：涵蓋Core tween、Timeline 編排、Plugins（Flip / Draggable / SplitText / DrawSVG / MorphSVG / MotionPath…）、utils 與效能模式。也可預覽完整8 份 Skills 文件（原文 + 中文重點）。
gsap.registerPlugin(...)； 2) 多步驟用 timeline，不要一串 delay； 3) ScrollTrigger 的 scrub 與 toggleActions 不要同時用； 4) SPA / 框架卸載時 ctx.revert() 清理。GSAP Core
Skill → gsap-coreto / from / fromTo / set
四種核心方法並列：to 從現狀到目標、from 進場、fromTo 雙端明確、set 立刻套用。
GSAP 動畫幾乎都從這四個方法開始。先搞清楚「誰是起點、誰是終點、要不要立刻套用」。
02 · 核心Stagger + Easing
多元素錯開進場：stagger 數字 vs 物件（from / each / amount），並對照常見 ease 曲線。
一次選很多元素時，用 stagger 讓節奏有層次；ease 決定「怎麼加速減速」。
03 · 核心播放控制 · repeat · yoyo
儲存 tween 實例後 play / pause / reverse / restart / progress；搭配 repeat、yoyo 與 yoyoEase。
GSAP 勝出 CSS 的關鍵之一：可隨時中斷、反轉、seek。先拿到回傳的 tween 再控制；yoyoEase 決定回程緩動。
04 · 響應式matchMedia + 減少動態
gsap.matchMedia() 依斷點與 prefers-reduced-motion 建立／自動 revert 動畫。
桌面／手機用不同位移，使用者偏好減少動態時 duration: 0——matchMedia 會自動清掉不匹配的動畫。
Timeline
Skill → gsap-timelineScrollTrigger
Skill → gsap-scrolltriggerBasic Trigger + toggleActions
用 start / end 定義觸發區間，以 toggleActions 控制進出視窗時的播放行為。
把動畫想成「到達某條線就播／離開就反轉」——事件驅動，不是跟著手指連續走。
02 · 核心Scrub：捲動綁定進度
動畫進度跟著捲動走。比較 scrub: true 與 scrub: 數字（平滑延遲）的差異。
動畫進度 = 捲動在 start→end 的比例。true 是硬跟手，數字是帶延遲的柔跟。
03 · 核心Pin：釘住區塊
捲動時把區塊固定在視窗，並只動畫子元素（不要動畫被 pin 的元素本身）。
區塊釘在畫面上，這段捲動距離拿來播內部動畫；end 越長，釘得越久。
04 · 進階Timeline + ScrollTrigger
把 scrollTrigger 掛在 timeline 上，用 scrub + pin 編排多步驟捲動動畫。
多步驟動畫掛在 timeline，再整段綁捲動；progress 對應整條時間軸，不是單一 tween。
05 · 列表ScrollTrigger.batch()
多個元素進場時批次觸發，一次 stagger 動畫。適合卡片牆與 IntersectionObserver 替代。
多個元素進場時先「收集一批」，再一次 stagger——比每張卡各自一個 trigger 更協調。
06 · 進階假水平捲動 + containerAnimation
垂直捲動驅動水平移動；ease 必須是 none。巢狀觸發用 containerAnimation。
手指仍垂直捲，內容水平滑。水平 tween 必須 ease: none，巢狀觸發靠 containerAnimation。
07 · 互動Snap：吸附進度
放開捲動後吸附到特定進度（例如整頁面板 0 / 0.33 / 0.66 / 1）。
放開捲動後，進度會被吸到最近的固定點（例如四個全幅面板的 0 / ⅓ / ⅔ / 1）。
08 · 偵測Callbacks + progress
獨立 ScrollTrigger.create()，用 onUpdate 讀 progress / direction / velocity。
不綁 tween，把 ScrollTrigger 當感測器：讀 progress / direction / isActive / velocity 自己更新 UI。
09 · 常見Parallax 視差
多層元素以不同 scrub 速度移動，做出深淺景深感。
同一捲動區間、不同位移量 = 景深。遠景動少、近景動多（或反向）即可。
Plugins
Skill → gsap-pluginsFlip：版面狀態過渡
點擊版面重排、4×4 lightbox 展開，以及 ScrollTrigger 驅動的 class／DOM 換父層滿版過渡。
FLIP = First, Last, Invert, Play。改 class 或 appendChild 換父層後補間；lightbox 用 cell 佔位 + fixed 層；接 scrub 則用捲動控制。
02 · PluginDraggable + Inertia
拖曳、旋轉、邊界限制；搭配 InertiaPlugin 鬆手後有動量滑行。
滑桿、卡片堆、旋鈕都靠 Draggable。inertia: true 需要同時 register InertiaPlugin。
03 · PluginSplitText：逐字動畫
把文字拆成 chars / words / lines，再 stagger 進場；用完要 revert。
逐字／逐詞動畫的標準做法。只拆需要的單位；卸載或重建前 split.revert()。
04 · PluginDrawSVG：描邊繪製
動畫 SVG stroke 的可見區段（drawSVG），做出「線被畫出來」的效果。
drawSVG 描述的是 stroke 上可見的 start–end 區段，不是 fill。元素要有 stroke。
05 · PluginMorphSVG：形狀變形
兩個 path 之間 morph；可調 type rotational 與 shapeIndex 避免扭曲。
不需相同點數也能 morph。若中途打結，試 shapeIndex 或 type: "rotational"。
06 · PluginMotionPath：沿路徑移動
元素沿 SVG path 移動；align + autoRotate 讓方向跟著切線。
路徑動畫不必手算座標。align 對齊 path，autoRotate 讓物體朝向行進方向。
07 · PluginScrollToPlugin
平滑捲到 y / 元素 / max；可設 offsetY。與 ScrollTrigger 互補，不綁進度。
按鈕「捲到某段」用 ScrollTo，不是 ScrollTrigger。可對 window 或可捲容器。
08 · PluginObserver：手勢正規化
統一 pointer / wheel / touch 方向事件；做 swipe 切頁不必綁 scroll 進度。
要「往上滑就下一屏」這類手勢時用 Observer；要綁捲動距離用 ScrollTrigger。
Utils
Skill → gsap-utilsPerformance
Skill → gsap-performanceFramework
Skill → gsap-frameworks官方 Skills 文件預覽
保留 SKILL.md 原文，並整理中文重點與常見陷阱。查看全部 →
GSAP Core
Tween 基礎：to / from / fromTo / set、easing、stagger、defaults、matchMedia（響應式與減少動態）。
02 · 時間軸GSAP Timeline
多步驟編排：timeline、position parameter、labels、巢狀時間軸與播放控制。
03 · 捲動GSAP ScrollTrigger
捲動驅動：trigger、pin、scrub、batch、containerAnimation、refresh 與清理。
04 · 外掛GSAP Plugins
外掛註冊與常用能力：Flip、Draggable、SplitText、DrawSVG、MorphSVG、MotionPath 等。
05 · ReactGSAP + React
React / Next：useGSAP、refs、scope、contextSafe、SSR 與清理。
06 · 框架GSAP + Vue / Svelte
Vue / Nuxt / Svelte：onMounted、gsap.context 作用域、卸載時 revert。
07 · 效能GSAP Performance
流暢 60fps：優先 transform／opacity、避免 layout thrashing、quickTo、will-change。
08 · 工具gsap.utils
輔助函式：clamp、mapRange、normalize、interpolate、random、snap、toArray、wrap、pipe。
markers。上線前請關掉。Plugin 實例（如 SplitText）記得revert()。