motion

SKILL.md

Motion (package: motion, formerly framer-motion) is the industry-standard React animation library used in production by thousands of applications. With 30,200+ GitHub stars and 300+ official examples, it provides a declarative API for creating sophisticated animations with minimal code.

Production Tested: React 19, Next.js 16, Vite 7, Tailwind v4

Performance: Uses native ScrollTimeline API when available for hardware acceleration.

使用 Motion（以前稱為 Framer Motion）建立複雜的 React 動畫 - 聲明性動畫、手勢（拖曳、懸停、點擊）、滾動效果、彈簧物理、佈局動畫和 SVG 操作。使用 LazyMotion (4.6 KB) 或 useAnimate mini (2.3 KB) 最佳化套件大小。 使用場合：新增拖放互動、創建滾動觸發的動畫、實現帶有過渡的模式對話框、建立具有動量的輪播、動畫頁面/路線過渡、創建視差英雄部分、實現平滑展開/折疊的手風琴或優化動畫包大小。對於簡單的清單動畫，請使用自動動畫技能（3.28 KB 與 34 KB）。 故障排除：AnimatePresence 退出不起作用、大型清單效能問題、Tailwind 轉換衝突、Next.js「使用客戶端」錯誤、可捲動容器佈局問題或 Cloudflare Workers 建置錯誤（已於 2024 年 12 月解決）。 來源：joaquimcassano/ideas-marketplace。

查看原文