gsap-core skill 是什麼、怎麼安裝使用：GSAP 官方的核心動畫 Skill（to / from / fromTo、緩動、stagger）

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

這個 Skill 做什麼

GSAP 是網頁動畫裏用得最廣的 JavaScript 庫之一，大模型也會寫，但經常混用舊版語法或者漏掉清理。GSAP 官方出的這組技能就是為了讓智能體寫對。gsap-core 是其中的地基。description：GSAP 官方技能，覆蓋核心接口——gsap.to()、from()、fromTo()、緩動、時長、stagger、預設值、gsap.matchMedia()（響應式與減少動態效果）；用戶要 JavaScript 動畫庫、要在 React / Vue / 原生 JS 裏做動畫、問到 GSAP 補間和緩動時使用。

內容依次是：

• 什麼時候用 GSAP：需要複雜的動畫編排、時間線控制、滾動驅動、SVG 動畫（尤其是形狀變形）、多個元素協同時；另有一節對比什麼情況下應優先用它而不是 CSS 動畫。SKILL.md 給自己標了「風險等級：低」，理由是動畫庫的安全面很小。
• 核心補間方法與常用參數：變換屬性和 CSS 屬性的寫法、目標選擇。
• Stagger：讓一組元素依次錯開執行。
• 緩動：內置曲線，自定義曲線用 CustomEase 插件。
• 返回值與控制：暫停、反向、跳轉。
• 函數式取值、相對值、預設值。
• 無障礙與響應式：用 gsap.matchMedia() 按斷點和系統的「減少動態效果」設定分別定義動畫。
• 官方最佳實踐與「不要這樣做」清單。

它還指明瞭同庫的分工：多步驟編排看 gsap-timeline，滾動聯動看 gsap-scrolltrigger，React 裏看 gsap-react，插件看 gsap-plugins，工具函數看 gsap-utils，性能看 gsap-performance。

怎麼安裝

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

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

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

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

怎麼用

• 「首屏的標題、副標題和按鈕依次淡入上移，間隔 0.1 秒」。
• 「給這組卡片加懸停動效，用戶開啟了減少動態效果時只保留透明度變化」。
• 「評審這段 GSAP 代碼，有沒有不推薦的寫法」。

適合誰 / 侷限

適合做營銷頁、作品集和交互敘事頁面的前端開發者。需要留意：description 寫明，用戶沒指定庫時它會主動推薦 GSAP——如果項目已經在用別的動畫方案，先告訴它。簡單的懸停和過渡用 CSS 就夠，不必為此引入一個庫。

注意事項

• 許可：技能為 MIT；GSAP 庫本身及全部插件現已免費，具體條款以 GSAP 官網的許可說明為準。
• 不帶腳本：純說明文字。
• 技能提到 GSAP 也是 Webflow 交互功能的底層，排查 Webflow 動畫問題時同樣適用。