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.

Cree sofisticadas animaciones de React con Motion (anteriormente Framer Motion): animaciones declarativas, gestos (arrastrar, pasar el cursor, tocar), efectos de desplazamiento, física de resortes, animaciones de diseño y manipulación de SVG. Optimice el tamaño del paquete con LazyMotion (4,6 KB) o utilice Animate mini (2,3 KB). Úselo cuando: agregue interacciones de arrastrar y soltar, cree animaciones activadas por desplazamiento, implemente diálogos modales con transiciones, cree carruseles con impulso, anime transiciones de página/ruta, cree secciones de héroe de paralaje, implemente acordeones con expansión/contraimiento suave u optimice tamaños de paquetes de animación. Para animaciones de listas simples, utilice la habilidad de animación automática (3,28 KB frente a 34 KB). Solucionar problemas: la salida de AnimatePresence no funciona, problemas de rendimiento de listas grandes, conflictos de transición de Tailwind, errores de "uso del cliente" de Next.js, problemas de diseño de contenedores desplazables o errores de compilación de Cloudflare Workers (resuelto en diciembre de 2024). Fuente: joaquimcassano/ideas-marketplace.

Ver original