Motion no es decoración
Tres preguntas que me hago antes de animar cualquier cosa, y por qué motion es comunicación, no adorno.
Animar todo es tentador. Sobre todo cuando descubrís transition: all 0.3s ease.
Pero motion mal usado es ruido: distrae, ralentiza y confunde.
Motion bien usado es otra cosa. Es comunicación. Te dice qué cambió, qué es causa y qué es consecuencia, qué viene primero. Sin una línea de copy.
Las tres preguntas
Antes de animar cualquier cosa, me hago esto:
- ¿Qué tiene que quedar claro al usuario después de esta animación? Si la respuesta es “nada”, no animes.
- ¿De dónde viene y a dónde va? Una animación sin punto de partida confunde. ¿Aparece desde abajo, desde la izquierda, desde un estado anterior?
- ¿Cuánto dura? Menos de 150ms casi no se nota. Más de 500ms ya se siente lento. El sweet spot es 200-350ms.
Cuándo animar (y cuándo no)
Animo cuando el cambio tiene dirección y significado:
- Un elemento entra → sí (origen y jerarquía)
- Un elemento desaparece → sí (focus se mueve)
- Un elemento cambia de estado → sí (feedback de acción)
- Un elemento solo “respira” → no (es loop vacío)
- Una página carga con fade-in global → no (es esperar por nada)
La tercera es la trampa más común. “Pongamos un fade-in para que se sienta suave” suele ser “no sé qué comunicar, pero quiero que se vea bonito”. No es lo mismo.
La diferencia
Motion decorativo: el usuario lo nota y piensa “ah, animación”. Motion comunicativo: el usuario no lo nota y entiende algo sin que se lo expliques.
La segunda es la que vale.