Animaciones
Transiciones fluidas, micro-interacciones y efectos visuales que encantan usuarios
Por qué es importante
Las animaciones bien ejecutadas mejoran la percepción de calidad, guían la atención del usuario, y hacen que las interfaces se sientan naturales y responsivas. Las micro-interacciones transforman acciones mundanas en experiencias delightful.
Stack Recomendado
Para React
Framer Motion es la librería de animación más popular para React. API declarativa, animaciones de layout, y gestures incluidos.
Consejos de la Comunidad
r/reactjs
"Framer Motion + layout animations = magia. Las transiciones entre estados son automáticas y fluidas."
r/Frontend
"Menos es más con animaciones. Duraciones de 200-300ms se sienten snappy. Más de 500ms se siente lento."
Mejores Prácticas
Respeta prefers-reduced-motion
Desactiva animaciones para usuarios que lo prefieren. Es accesibilidad básica.
Usa transform y opacity
Estas propiedades animan en el compositor, evitando layout thrashing.
Evita animaciones bloqueantes
No uses animaciones que impidan interacción o hagan esperar al usuario.