Thomas y Johnston los escribieron mirando cómo se mueve un personaje dibujado: squash and stretch, arcos, acción secundaria. Contestan a una pregunta de dibujante: ¿cómo hago que esto parezca vivo?
Thomas y Johnston (1981). Siguen valiendo, y describen otra cosa: cómo se mueve un cuerpo dibujado.
Issara Willenskomer los escribió mirando una interfaz. No preguntan si el movimiento es bonito: preguntan qué le está diciendo al usuario. Cada principio es una respuesta a «¿qué relación hay entre estos dos objetos?».
Willenskomer (2017), recogidos también por SVGator (2024). Son los que se recorren aquí.
Qué hace una cosa por sí sola: cómo entra, cómo se abre, cómo se multiplica. Seis principios.
Qué dice el movimiento sobre quién manda y qué depende de qué. Cuatro principios.
Cómo se pasa de un estado a otro sin que se rompa el hilo de la atención. Dos principios.
Willenskomer no defiende el movimiento porque sea bonito. Sostiene que hace cuatro trabajos concretos de usabilidad, y que los doce principios son las herramientas para hacerlos.
Acorta la distancia entre lo que el usuario espera que pase y lo que pasa. Un movimiento que contradice la expectativa se siente como un error aunque no lo sea.
Mantiene el hilo dentro de una pantalla y entre pantallas. Si el objeto desaparece y reaparece, para el usuario es otro objeto.
Convierte una serie de momentos sueltos en una secuencia: esto viene de aquí, lleva a esto otro y termina allí.
Dice qué depende de qué, qué está delante y qué manda. Lo dice antes de que el usuario lo piense.
Los doce se reparten en tres familias según lo que responde cada uno: qué hace un objeto por sí solo, qué relación guarda con los demás y cómo se pasa de un estado al siguiente.
Lo que hace una cosa por sí sola. Aquí no importa todavía con quién se relaciona: importa cómo se comporta al entrar, al abrirse, al acercarse o al multiplicarse.
Nada arranca a velocidad plena ni se detiene en seco. La curva decide si el movimiento se siente natural o mecánico.
Son las mismas siete del editor de gráficos de After Effects. La curva dibuja la posición contra el tiempo: cuanto más inclinada, más rápido va el objeto en ese instante. Las Back se pasan de largo y vuelven, y por eso se salen de las dos líneas.
◆ Dale play a cada unaAntes de salir, el objeto carga: retrocede un poco. Ese gesto minúsculo avisa al ojo de lo que va a pasar, y por eso el movimiento se lee como intencional y no como un salto.
Es el principio que más se nota cuando falta. Los dos carriles hacen el mismo recorrido, en el mismo tiempo y con la misma curva: lo único distinto es que el de abajo retrocede antes de arrancar.
◆ Sube la carga y vuelve a lanzarLa máscara no borra nada: decide qué parte del objeto se ve. El objeto está entero todo el rato; lo que se anima es la forma que lo recorta.
Es una relación entre forma y objeto. En CSS es
clip-path; en After Effects
es una máscara o un track matte. Arrastra el deslizador para recorrerla
fotograma a fotograma.
Colocar un elemento sobre otro para crear profundidad usando el eje z. La sombra no es adorno: es la única pista de a qué distancia está cada capa.
En una pantalla plana la profundidad es una convención, y el overlay es cómo se negocia: qué tapa a qué, cuánta sombra proyecta y cuánto se separa al abrirse.
◆ Separa las capasLos elementos nuevos nacen de uno que ya estaba. El clon dice de dónde viene: por eso una cuadrícula que brota del botón que la pidió se entiende sin explicación.
Lo que comunica no es el clon: es el escalonado. Si los treinta aparecen a la vez es un cambio de pantalla; si van saliendo uno tras otro desde la madre, es una consecuencia.
◆ Cambia el patrón y clonaLa cámara avanza mientras el ángulo se abre lo justo para que el sujeto no cambie de tamaño. Lo único que se mueve es el fondo.
Es el efecto que hizo famoso Vértigo. Ocurren dos cosas a la vez y cada una deshace a la otra: la cámara se acerca —lo que agrandaría todo— y el objetivo se abre —lo que lo encogería—. El sujeto, que está justo en medio, se queda igual. El fondo, que está mucho más lejos, no: parece echarse encima o salir corriendo.
◆ Apaga la compensaciónQué dice el movimiento sobre quién manda. Cuando dos cosas se mueven a la vez, el orden y la velocidad con que lo hacen ya están contando cuál depende de cuál.
Los elementos no entran a la vez: entran en secuencia, cada uno con un pequeño retraso respecto al anterior. Ese desfase es lo que hace que se lean como cosas distintas y no como un bloque que aparece de golpe.
En el original figura junto a follow through and overlapping action: el mismo desfase que hace que la capa de atrás termine después que la de delante. Pon el retraso a cero y mira cómo se pierde la jerarquía.
◆ Lleva el retraso a ceroUn objeto manda y los demás heredan lo que le pasa. Si el padre gira, el hijo gira con él; si el padre crece, el hijo crece. No hay que animar a los hijos.
Emparentar es decirle a un objeto: «lo que le pase a ese otro, te pasa a ti». Se anima solo al padre y los hijos van detrás sin que nadie los toque, de modo que mover un grupo entero cuesta lo mismo que mover una pieza. Sin ese vínculo, cada hijo habría que animarlo por separado.
◆ Suelta el vínculoPara decir «ahora manda esto» no hace falta señalarlo: basta con apagar todo lo demás. El velo y el desenfoque son una declaración de jerarquía.
El desenfoque además informa de la distancia: lo que está fuera de foco se lee como más lejos, y por eso el diálogo parece flotar por delante en vez de estar pegado encima.
◆ Deja el velo en cero y comparaLo que no se haya guardado se perderá.
Al desplazarse, lo que está cerca se mueve más que lo que está lejos. Con esa sola diferencia de velocidad, una pantalla plana se convierte en un espacio.
También es jerarquía: la capa que más se mueve es la que se lee como principal. Sube el factor del fondo hasta igualarlo al frente y la profundidad desaparece de golpe.
◆ Arrastra dentro de la escenaCómo se pasa de un estado a otro sin cortar el hilo. Si el objeto de la pantalla siguiente es el mismo que el de la anterior, hay que demostrarlo con el movimiento: si desaparece y aparece, es otro objeto.
Un objeto pasa de un estado a otro sin dejar de ser el mismo objeto. El botón no desaparece para que aparezca la tarjeta: el botón es la tarjeta.
Willenskomer lo dice con una distinción útil: un botón es un botón, pero en el movimiento está siendo una tarjeta. Lo que sostiene la continuidad es que nunca hay un fotograma en que no haya nada. Arrastra el deslizador despacio y busca el punto en que el texto del botón se apaga y el de la tarjeta todavía no ha entrado: ahí es donde se rompe si se hace mal.
◆ Recorre la transformación a manoEl número no salta: recorre el camino del valor viejo al nuevo. Y al recorrerlo cuenta dos cosas que un salto no puede contar: cuánto cambió y en qué dirección.
Un contador que salta de 240 a 1 380 solo dice el resultado. El mismo contador animado dice además que subió, y que subió mucho. Prueba a poner la duración en cero.
◆ Fija un destino y actualizaEn una interfaz real nunca aparece un principio solo. Un menú que se abre usa máscara, offset y easing en el mismo gesto, y saber separarlos es lo que permite arreglarlo cuando algo se siente mal.
Todo lo que acabas de manipular existe igual en After Effects. Cambia el vocabulario, no el principio.
| Principio | Aquí, en CSS | Allí, en After Effects |
|---|---|---|
| Easing | cubic-bezier(.42,0,.58,1) |
Editor de gráficos, curva de valor con sus tiradores |
| Anticipation | Un fotograma clave antes del cero | Un fotograma clave por detrás del inicio del movimiento |
| Masking | clip-path |
Máscaras y track mattes (alfa y luminancia) |
| Offset & Delay | animation-delay por índice |
Desplazar capas en la línea de tiempo, o el sequence layers |
| Parenting | Meter el hijo dentro del padre | El pick whip de la columna «Parent» |
| Parallax | Un factor por capa sobre el mismo desplazamiento | Capas 3D a distintas z con una cámara que viaja |
| Value Change | Interpolar el número por guion | Expresión sobre un control deslizante |
En el Aula hay tutoriales que cubren varias de estas piezas por separado: dolly zoom, parallax y multiplano, masking y ondas, contadores dinámicos y cámaras y planos.
SVGator. (1 de febrero de 2024). Motion design basics: Beginner's guide to start learning. https://www.svgator.com/blog/motion-design-basics-guide/
Thomas, F. y Johnston, O. (1981). The illusion of life: Disney animation. Abbeville Press.
Willenskomer, I. (31 de marzo de 2017). Creating usability with motion: The UX in motion manifesto. UX in Motion. https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc
Lo que se mueve en una pantalla siempre está diciendo algo. A partir de aquí, te toca decidir qué.
Esta presentación está pensada para pantalla horizontal.