La ciencia del easing en motion design
Una guía práctica sobre easing en UI y motion design: qué transmiten las curvas más comunes, qué emoción comunican, qué movimientos del mundo real se les parecen y por qué incluso …
El easing no es decoración: es la forma en que el movimiento comunica intención. Un linear lerp dice 'soy una máquina'; un cubic-bezier(.83, 0, .17, 1) dice 'soy un objeto físico con masa'. Toda la jerarquía emocional de una animación está en su curva.
Las curvas más comunes — ease-in-out, ease-out-cubic, ease-in-back — replican movimientos del mundo real: un ascensor que arranca y frena, una pelota que cae, un cajón que rebota cuando se cierra. Si tu animación se siente artificial, normalmente es porque la curva no coincide con la metáfora física.
La elasticidad es otra historia. Easings tipo back, elastic o bounce introducen overshoot — la animación pasa de largo y vuelve. Es exactamente lo que hace un objeto con momentum, y es lo que nuestros cerebros leen como 'vivo'. Por eso UIs como las de iOS o Linear se sienten orgánicas: dejan que las cosas pasen de largo brevemente.
El error más común es aplicar la misma curva a todo. Una página llena de ease-in-out se siente plana. La regla práctica: usa ease-out para entradas (algo aparece desacelerando), ease-in para salidas (algo se va acelerando hacia fuera de pantalla) y ease-in-out solo para cambios de estado a media página, no para apariciones.
Y por último: el tiempo. Una curva preciosa con un duration de 800ms se siente lenta; la misma con 320ms se siente premium. Diseñar motion es 50% curva, 50% duration. La intuición se entrena viendo mucho y midiendo en milisegundos.
Trabaja con JMWEB
Construyamos algo con personalidad.
Todo arranca con una conversación. Trae un brief, una referencia, una idea a medio cocinar — del resto me ocupo yo.
Empezar un proyecto
