Official gsap-skills · 中英對照

GSAP Skills 文件預覽

對應官方gsap-skills的 8 份 skill。每頁上方是中文重點整理，下方保留SKILL.md 原文（去 frontmatter 後完整渲染）。

怎麼讀：先掃中文重點與常見陷阱，再往下對照英文原文與程式碼範例。內容來源為專案內.agents/skills/*/SKILL.md。

全部 Skills（8）

Tween 基礎：to / from / fromTo / set、easing、stagger、defaults、matchMedia（響應式與減少動態）。

中文重點 14 條 · 陷阱 4 條

多步驟編排：timeline、position parameter、labels、巢狀時間軸與播放控制。

中文重點 10 條 · 陷阱 3 條

捲動驅動：trigger、pin、scrub、batch、containerAnimation、refresh 與清理。

中文重點 10 條 · 陷阱 4 條

外掛註冊與常用能力：Flip、Draggable、SplitText、DrawSVG、MorphSVG、MotionPath 等。

中文重點 11 條 · 陷阱 3 條

React / Next：useGSAP、refs、scope、contextSafe、SSR 與清理。

中文重點 9 條 · 陷阱 3 條

Vue / Nuxt / Svelte：onMounted、gsap.context 作用域、卸載時 revert。

中文重點 9 條 · 陷阱 3 條

流暢 60fps：優先 transform／opacity、避免 layout thrashing、quickTo、will-change。

中文重點 9 條 · 陷阱 3 條

輔助函式：clamp、mapRange、normalize、interpolate、random、snap、toArray、wrap、pipe。

中文重點 12 條 · 陷阱 2 條