Gsap Web
iart-ai/web-animation-skills/skills/gsap-web作者 iart-aib6dba3eb7597無授權條款34 個星標收錄於 2026年10月9日更新於 2026年10月8日儲存庫3 個月前更新
This skill should be used when the user asks to "build a scroll animation", "add ScrollTrigger", "pin a section while scrolling", "scrub an animation to scroll", "create a hero timeline", "do a horizontal scroll section", "split text and animate words", "animate a layout change with GSAP Flip", "sync ScrollTrigger with Lenis", "Lenis smooth scroll jittery", "ScrollTrigger markers drift", "ScrollTrigger pins break with Lenis/Locomotive", or "set up smooth scroll with GSAP pinning". Covers GSAP timelines, ScrollTrigger, SplitText, Flip, and Lenis/Locomotive smooth-scroll sync for code-driven web motion.
僅公開檔案列表。將技能安裝到工作區後即可檢視檔案內容。
| 路徑 | 大小 | 類型 |
|---|---|---|
| examples/hero-timeline.js | 2.5 KB | text/plain |
| examples/standalone-template.html | 2.7 KB | text/plain |
| README.md | 0 B | text/markdown |
| references/scrolltrigger-cookbook.md | 5.5 KB | text/markdown |
| references/scrolltrigger-lenis.md | 10.3 KB | text/markdown |
| SKILL.md | 12.1 KB | text/markdown |
來源與署名
來源：iart-ai/web-animation-skills位於skills/gsap-web提交b6dba3e
授權條款： 無授權條款
內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。
更多來自 iart-ai/web-animation-skills 的技能
Svg Animation
iart-ai
指導使用 CSS、SMIL 或 GSAP 製作 SVG 動畫，產出附定位工具的獨立 HTML 檔案。
Page Transition Animation
iart-ai
在 Next.js App Router 中實作與除錯頁面進入／離開轉場動畫，可使用 Framer Motion 或 View Transitions API。
Micro Interaction
iart-ai
指導使用 Framer Motion 與現代 CSS 打造小型 UI 微互動，並交付獨立的 HTML 示範。
Lottie Animation
iart-ai
整合、控制、換膚並匯出用於網頁、iOS、Android 與 React Native 的 Lottie 向量動畫。
Glassmorphism
iart-ai
用獨立 HTML 打造磨砂與液態玻璃擬態介面效果，包含 CSS 模糊、邊緣高光、動效與無障礙回退。
Ascii Animation
iart-ai
將生成場、影像、影片、3D 場景或終端機畫面渲染成動態 ASCII 字元畫。
更多Software Development技能
Playground
anthropics
建立自成一體的互動式 HTML 遊樂場，包含控制項、即時預覽與可複製的提示詞輸出。
M5 Onboard
anthropics
透過 USB 偵測 M5Stack ESP32 開發板，燒錄 UIFlow 2.0 韌體並安裝 MicroPython 應用程式套件。
Cardputer Buddy
anthropics
指導迭代 Cardputer-Adv 的 MicroPython 應用程式套件：新增應用程式、透過 USB 序列埠推送檔案、查看日誌並執行 REPL 指令。
Web Design Guidelines
vercel-labs
依據從遠端來源取得的 Web Interface Guidelines 審查 UI 程式碼，並以 file:line 形式回報問題。
Vercel React Native Skills
vercel-labs
React Native 與 Expo 最佳實務規則，涵蓋清單效能、動畫、導覽、UI 模式、狀態與 monorepo 設定。
Vercel React Best Practices
vercel-labs
Vercel 的 React 與 Next.js 效能指南，以 70 條規則的形式用於撰寫、審查與重構程式碼。