技能包

gsap-skills:教助手按官方方式寫 GSAP 動畫

適合要讓助手正確使用 GSAP 核心 API、時間軸或 ScrollTrigger 的人,前提是用官方 npx 命令安裝技能,並用公開 gsap 包安裝動畫庫。

官方來源 · gsap-skills

安裝

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

適合誰

適合要讓程式助手按官方方式使用 GSAP(GreenSock Animation Platform)的人。官方寫明:這些是 GSAP 的正式 AI 技能,用來教助手正確用法,涵蓋核心 API、時間軸、ScrollTrigger、插件,以及 React、Vue、Svelte、原生 JS 和效能。

更合適的人,是已經在寫動畫、準備檢查 gsap.to() / from() / fromTo()、時間軸編排,或捲動觸發是否寫對的人。不適合把這套技能當成 GSAP 執行階段本身:動畫庫要從公開的 gsap npm 包安裝。官方寫明 GSAP 百分之百免費,包含全部插件;Webflow 收購後,從前的 Club 插件(如 SplitText、MorphSVG)也對所有人免費,包括商用。不需要 Club 會員、.npmrc、鑑權權杖或私有儲存庫。

開始前要能在本機執行 npx skills add。不要把這條命令改寫成未給出的其他安裝器。

3 分鐘完成第一次嘗試

只走儲存庫給出的這一條安裝命令。先完成技能安裝,再讓助手做一次只讀核對,先不要改專案檔案。

前置條件:目前環境能執行 npm/npx,並且你的助手能載入新安裝的技能。第一次不要寫入動畫程式,也不要連線未說明的私有源。

安裝位置:在專案或工作區按官方命令新增技能。

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

官方儲存庫:

https://github.com/greensock/gsap-skills

GSAP 產品頁:

https://gsap.com/

低風險觸發:安裝後,讓助手只檢查一段已有的 gsap.to() 是否用了官方核心 API 裡提到的緩動、時長、stagger 或 defaults。不要先讓它改檔案。若下一步要寫入時間軸或 ScrollTrigger 程式,先確認將改哪些檔案,再執行。

成功訊號:助手能按 gsap-core 的口徑討論 gsap.to() / from() / fromTo(),而不是編造未列出的技能名。哪些助手能用這條 CLI,官方指向:

https://github.com/vercel-labs/skills#supported-agents

不要從一份名單推斷「只有這些助手能用」。

使用案例

案例一:核對本機核心動畫寫法。用 gsap-core:核心 API 包括 gsap.to() / from() / fromTo(),以及 easing、duration、stagger、defaults。適合已經有一段補間、想核對參數有沒有寫偏的人。證據只到這些主題,沒有給出完整函式清單。先做只讀檢查;若要改程式,先確認副作用。

案例二:核對本機捲動動畫。用 gsap-scrolltrigger:涵蓋捲動聯動、pinning、scrub、triggers,以及 refresh 與 cleanup。適合頁面裡已經有捲動觸發、想核對有沒有漏掉重新整理或清理的人。同樣先檢查,再決定是否改檔案。時間軸技能 gsap-timeline 在原文裡單獨成行(sequencing、position parameter、labels、nesting、playback),不要把它和 ScrollTrigger 混成一個技能。

使用邊界

安裝技能用 npx skills add https://github.com/greensock/gsap-skills 。安裝 GSAP 庫用公開 gsap npm 包。兩者不要當成同一步。

原文點名的技能行只有 gsap-core、gsap-timeline、gsap-scrolltrigger。其他技能名不要自行補全。

GSAP 與從前的 Club 插件現已免費,包括商用;收購說明見:

https://gsap.com/blog/webflow-GSAP/

不要再按需要鑑權或私有源的方式安裝。官方沒有把適用語言寫成互斥範圍,也沒有要求必須同時使用 React、Vue 或 Svelte。