El movimiento en productos digitales no es decoración. Es comunicación. Cuando se hace bien, la animación guía la atención, proporciona retroalimentación y hace que las interfaces se sientan vivas. Cuando se hace mal, frustra a los usuarios y los ralentiza.
Estos son los principios que seguimos.
Propósito Sobre Pulido
Cada animación debe responder: ¿por qué se mueve esto? Si no puedes articular el propósito—retroalimentación, orientación, deleite—el movimiento probablemente no debería existir.
Los propósitos comunes incluyen:
- Retroalimentación: Confirmar que una acción fue recibida
- Orientación: Mostrar de dónde vino o adónde fue algo
- Jerarquía: Dirigir la atención a lo que importa
- Continuidad: Mantener el contexto durante las transiciones
La Duración Importa
El movimiento debe ser lo suficientemente rápido para sentirse responsivo, lo suficientemente lento para ser percibido. Nuestros valores predeterminados:
- Micro-interacciones: 100-200ms (estados de botones, toggles)
- Transiciones pequeñas: 200-300ms (dropdowns, tooltips)
- Transiciones de página: 300-500ms (navegación, modales)
- Secuencias complejas: 500ms+ (onboarding, celebraciones)
Estos no son reglas—son puntos de partida. Prueba con usuarios reales.
El Easing Crea Personalidad
El movimiento lineal se siente robótico. El easing hace que el movimiento se sienta natural.
- Ease-out: Inicio rápido, parada suave. Bueno para entradas.
- Ease-in: Inicio suave, final rápido. Bueno para salidas.
- Ease-in-out: Equilibrado. Bueno para mover objetos.
Por defecto usamos power2.out para la mayoría de las animaciones UI. Es suave sin ser lento.
Respeta las Preferencias
Algunos usuarios experimentan mareo por movimiento o encuentran la animación distrayente. Siempre respeta prefers-reduced-motion. No es solo accesibilidad—es respeto.
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}Comienza Simple
No necesitas bibliotecas de animación complejas para empezar. Las transiciones CSS manejan la mayoría del movimiento UI. Gradúa a GSAP o Framer Motion cuando necesites secuenciación, física o efectos activados por scroll.
El movimiento es una herramienta. Úsala intencionalmente.