Gramática del movimiento: cuándo la animación se gana sus fotogramas

La mayor parte de la animación de interfaz es decoración que lleva prendida la placa de una función. La prueba que aplico es directa: si no puedes explicar qué le dice una animación al usuario, no se gana sus fotogramas; elimínala. Lo que sobrevive a esa prueba resulta ser una gramática mínima: cuatro bandas de duración, dos reglas de easing y un puñado de tareas que el movimiento hace genuinamente mejor que un cambio estático. Todo lo demás es un diseñador entreteniéndose a costa del usuario, dieciséis milisegundos cada vez. {.answer-block}

En resumen

• El movimiento es información o es ruido. Las tareas legítimas: mostrar de dónde vino algo o adónde se fue, confirmar que una acción quedó registrada, dirigir la atención durante un cambio y enmascarar la latencia inevitable. Cualquier otra cosa, córtala.
• Cuatro bandas de duración cubren la interfaz entera: ~100ms para pulsaciones y conmutadores, 150-200ms para hovers y fundidos, 250-300ms para expandir y contraer, 300-400ms para transiciones de página y modales.
• Dos reglas de easing cubren las entradas y las salidas: ease-out para todo lo que entra, ease-in para todo lo que sale. Los elementos que se mueven mientras permanecen en pantalla llevan ease-in-out; linear queda para las barras de progreso y los fundidos puros.
• La prueba de eliminación manda sobre la prueba del gusto. «¿Se siente agradable?» mantiene viva la mala animación; «¿qué le dice al usuario?» la mata.
• Trata prefers-reduced-motion como un requisito de primer nivel, no como algo que se añade al final: la gramática tiene que degradarse a cambios de estado instantáneos y seguir teniendo sentido.

El movimiento es una frase, no un estado de ánimo

Una animación de interfaz es una afirmación sobre la causalidad: este panel vino de ese botón; este elemento se fue a esa lista; este cambio ocurrió porque actuaste. Cuando el movimiento carga con una de esas afirmaciones, el modelo mental del usuario se actualiza gratis, sin lectura y sin razonamiento. Cuando no carga con nada, el usuario espera a que termine la coreografía antes de poder continuar, y cada espera es un pequeño impuesto sobre la confianza.

Ese encuadre produce la lista práctica de tareas que el movimiento realmente tiene:

1. Continuidad espacial: de dónde vino esto, adónde se fue. La tarjeta que se expande, la hoja que se eleva desde su disparador, la fila borrada que se contrae hacia el icono de archivo.
2. Acuse de recibo: tu pulsación quedó registrada. El hundimiento del botón en 100ms, el giro del conmutador, la marca de la casilla.
3. Guiado de la atención: durante un cambio de estado, lo único que se movió es lo único que cambió. El movimiento está entre las señales de atención más potentes que puede emitir una interfaz, y por eso mismo el movimiento inmerecido sale tan caro.
4. Enmascaramiento de latencia: el brillo del esqueleto de carga, el intercambio optimista, la revelación progresiva que hace que 400ms de petición se sientan intencionados en lugar de rotos.

Si una animación de tu pantalla no está haciendo una de esas cuatro tareas, está haciendo la quinta: lucirse.

Las cuatro bandas de duración

Las duraciones no son cuestión de gusto; son física ajustada a la atención. Estas son las bandas a las que someto toda interfaz:

El patrón que hay debajo: la duración escala con el tamaño del cambio. Un control que acusa recibo de una pulsación tiene que ser casi instantáneo; pasados los ~150ms, el acuse de recibo se lee como lentitud. Una transición a pantalla completa recibe más tiempo porque el usuario lo necesita para reorientarse. El fallo más común es la inversión: botones que rebotan durante 400ms (lentitud disfrazada de encanto) y modales que aparecen de golpe en 100ms (desorientación disfrazada de velocidad).

Pasados los 400ms, el movimiento de interfaz necesita una razón excepcional para existir. Los momentos de onboarding y los estados de celebración se ganan a veces 500-600ms; la navegación a escala de teléfono casi nunca, aunque las transformaciones de contenedor en pantallas grandes son la excepción honesta: las superficies de tableta y escritorio se estiran legítimamente hacia los 500ms porque el ojo tiene más distancia que recorrer. El usuario ejecuta tu transición miles de veces, y la coreografía que encantó en la demo es la fricción que maldice en la tercera semana.

Los sistemas basados en muelles (SwiftUI, Framer Motion) expresan el tiempo como rigidez y amortiguación en lugar de duraciones fijas, pero las bandas siguen aplicando: describen el tiempo de asentamiento percibido hacia el que ajustas. La gramática sobrevive al cambio de notación.

Dos reglas de easing

El easing es donde la animación adquiere física, y dos reglas cubren casi todo:

Ease-out para lo que entra. Los elementos que llegan a la pantalla empiezan rápido y desaceleran hasta su sitio: aterrizan. Ease-out concentra el movimiento al principio, así el ojo capta pronto el destino y el elemento se siente reactivo.

Ease-in para lo que sale. Los elementos que se marchan aceleran al alejarse: salen con intención. El arranque lento le da al ojo un instante para registrar que algo se está yendo antes de que se vaya.

El easing linear se lee como mecánico porque nada en el mundo físico se mueve así; resérvalo para los indicadores de progreso, donde la cadencia constante es la información, y para los fundidos puros de opacidad o color, donde nada recorre distancia y no hay movimiento al que una curva pueda dar forma. Y el ease-in-out simétrico pertenece al tercer caso que las dos reglas dejan fuera a propósito: los elementos que se mueven mientras permanecen en pantalla, como una fila que se reordena o un panel que cambia de tamaño. Ni aterrizan ni salen, así que aceleran desde el reposo y vuelven a asentarse en él. Donde ease-in-out se gana su mala fama es como valor por defecto nunca examinado en entradas y salidas, porque ahí vuelve las llegadas lentas y las salidas bruscas a la vez.

La prueba de eliminación en la práctica

El procedimiento de revisión que mantiene honesto a un sistema de movimiento:

1. Inventaría cada animación de la superficie, incluidos los valores por defecto del framework que nadie eligió deliberadamente.
2. Para cada una, completa la frase: «Este movimiento le dice al usuario ___». Origen espacial, acuse de recibo, atención, latencia: una de las cuatro, en palabras llanas.
3. Todo lo que quede en blanco sigue en blanco después de discutirlo. «Aporta refinamiento» y «se siente premium» son huecos con mejor vocabulario. Elimina el movimiento y mira la superficie durante un día; el refinamiento que solo existía en el movimiento nunca fue refinamiento.
4. Cronometra lo que sobrevive frente a las bandas, corrige los easings y prueba la ruta de movimiento reducido. prefers-reduced-motion debe producir una interfaz plenamente coherente hecha de cambios de estado instantáneos; si quitar una animación rompe la comprensión, esa animación llevaba información que debería existir también de forma estática, lo cual es un hallazgo por derecho propio.

Haz esto en un producto maduro y normalmente muere la mitad del inventario. Una lista de bajas representativa de una sola pasada: la elevación al hover de 400ms en las tarjetas (no le dice al usuario nada que no dijera ya un cambio de cursor), la entrada escalonada de la lista que se vuelve a reproducir en cada navegación (600ms para anunciar «tenemos filas»), el icono de guardado que late (atención reclamada, nada que atender que haya cambiado). Nadie las echa de menos. Lo que queda se vuelve más rápido, más consistente y, paradójicamente, más perceptible, porque el movimiento recupera su valor de señal en cuanto deja de ser ambiental.

La vista de sistema

En un design system, el movimiento vive en tokens exactamente igual que el espaciado y el color: duraciones con nombre (--motion-press: 100ms, --motion-surface: 300ms), easings con nombre (--ease-enter, --ease-exit) y componentes que consumen tokens en vez de inventarse tiempos en línea. El modo de fallo del movimiento sin sistematizar no es la fealdad, es la deriva: cinco modales con cinco duraciones, cada una defendible, incoherentes en conjunto. La misma disciplina que gobierna una escala de espaciado gobierna una escala de movimiento: cada valor sale del sistema o lleva una razón documentada.

El movimiento es además la capa más perecedera de un design system, la primera en la que los colaboradores improvisan por su cuenta, porque un tween puntual de 250ms parece inofensivo. Lo es, once veces, y luego el producto parpadea con once acentos de movimiento inmotivado. La gramática se sostiene solo mientras la prueba de eliminación siga corriendo.

Preguntas frecuentes

¿Cuánto deben durar las animaciones de interfaz?

Ajusta la duración al tamaño del cambio: ~100ms para el acuse de recibo de un control (pulsaciones, conmutadores), 150-200ms para hovers y fundidos, 250-300ms para expandir y contraer, 300-400ms para transiciones de página y modales. Más de 400ms exige una justificación excepcional: los usuarios repiten las transiciones de interfaz miles de veces.

¿Qué easing deben usar las animaciones de interfaz?

Ease-out para los elementos que entran (arranque rápido, desaceleración hasta su sitio), ease-in para los que salen (aceleran al alejarse) y ease-in-out para los que se mueven mientras permanecen en pantalla. Reserva linear para los indicadores de progreso y los fundidos puros de opacidad o color. En las entradas, linear se lee mecánico y ease-in-out vuelve lentas las llegadas: ease-out es la regla.

¿Cuándo debería una interfaz usar animación?

Cuando el movimiento lleva información que un cambio estático no puede llevar: continuidad espacial (de dónde vino algo o adónde se fue), acuse de recibo de una entrada, guiado de la atención hacia lo que cambió o enmascaramiento de una latencia inevitable. Si no puedes decir cuál de esas tareas hace una animación, quítala: el movimiento decorativo grava cada interacción que toca.

¿Cómo encaja prefers-reduced-motion en un sistema de movimiento?

Como un requisito de primer nivel: la ruta reducida sustituye el movimiento por cambios de estado instantáneos, y la interfaz debe seguir siendo plenamente comprensible. Si quitar una animación rompe la comprensión, el movimiento llevaba información que necesita un equivalente estático: un hallazgo de accesibilidad y un hallazgo de diseño a la vez.