De power0 a power4, y la familia suave

Los eases de potencia son la columna vertebral del catálogo: cinco curvas que solo se diferencian en el exponente y que cubren la mayor parte de las animaciones de interfaz. Al lado viven tres familias más —seno, círculo y exponencial— que no son potencias y que ocupan huecos que las potencias no cubren bien. La confusión habitual es tratarlas como una lista de sabores y elegir por nombre; la forma útil de verlas es como un continuo de agresividad en el arranque, y para eso hacen falta números.

Las potencias son un único polinomio con un exponente

powerN corresponde al polinomio de exponente N + 1. La numeración empieza en cero porque power0 es el caso degenerado sin curvatura: la recta.

La variante in es p elevado al exponente. La out es la misma reflejada. Eso es literalmente todo el código:

const easeIn  = (n) => (p) => p ** n;
const easeOut = (n) => (p) => 1 - (1 - p) ** n;

Comparadas en cinco puntos del recorrido, las variantes out dan estas cifras. Cada fila dice qué fracción del recorrido lleva hecha el elemento en ese instante:

Esa tabla dice más que cualquier descripción cualitativa. Con power4.out, al 50% del tiempo el elemento ya ha recorrido el 96,9% de la distancia: la segunda mitad de la animación es prácticamente inmóvil. Con power1.out, al 50% lleva el 75%, que sigue dejando un cuarto del camino para la segunda mitad.

De ahí sale la regla operativa que sustituye al criterio de gusto: subir el exponente concentra el movimiento al principio y alarga la cola de reposo. Y de ahí sale el efecto perceptivo: power4.out se siente más rápido que power1.out con la misma duración, aunque tarden lo mismo, porque el ojo juzga la velocidad por lo que pasa al principio y la cola casi inmóvil no se registra como movimiento.

Ese es también su riesgo. Un power4.out de un segundo se percibe como una animación de 400 milisegundos con 600 de nada, y la “nada” es tiempo durante el cual el elemento sigue formalmente ocupado y no se puede reutilizar. Como criterio, cuanto mayor sea el exponente, más corta debe ser la duración nominal.

Sine, circ y expo

Estas tres no son polinomios y ocupan posiciones concretas en el continuo.

sine es el cuarto de onda de un coseno. Es la curva más suave del catálogo, más suave incluso que power1, y su rasgo distintivo es que su derivada en el extremo es cero de la forma más “gradual” posible. Comparada en los mismos puntos:

Está entre lineal y power1. Es el ease correcto para movimientos que deben notarse poco: un desplazamiento de fondo, un cambio de color, una respiración. Es también el mejor para animaciones cíclicas, porque encadenar sine.inOut con yoyo produce un movimiento continuo sin la parada perceptible que dejan las potencias.

circ es un cuarto de circunferencia. Su rasgo es que la derivada en el extremo de la variante in es cero y en el otro extremo es infinita: la curva llega al final con pendiente vertical.

Fíjate en el 10%: circ.out ya lleva el 43,6% recorrido, más que power4.out. Pero al 50% lleva menos que power2.out. Es una curva con arranque brutal y frenada mucho más suave que las potencias equivalentes, y esa combinación es difícil de conseguir con exponentes. Su nicho: cosas pesadas que salen disparadas y se posan, como un panel que aparece de golpe y encaja.

expo es la más agresiva del catálogo.

A la décima parte del tiempo ya está a mitad de camino, y a la mitad del tiempo está prácticamente en el destino. Es el ease del “esto ya está hecho, deja de mirarlo”. Funciona muy bien en desapariciones —algo que se va y no vuelve— y muy mal en apariciones, donde el usuario necesita ver de dónde viene el elemento para entender la relación espacial.

La variante expo.in es el complemento: durante la mayor parte del tiempo no pasa nada visible y al final el elemento se dispara. Es lo que quieres para una salida que sugiere aceleración fuera de pantalla.

Elegir la variante

La regla es tan estable que se puede enunciar como tres frases y casi nunca falla.

Lo que entra usa out. Un elemento que aparece debe llegar rápido y posarse. El usuario ve el destino cuanto antes y la cola le da tiempo a asimilarlo. Es también por lo que el ease por defecto de GSAP es power1.out.

Lo que sale usa in. Un elemento que se va debe empezar despacio —para que el usuario registre que se está yendo— y acelerar al final. Si sale con out, el arranque brusco se lee como una desaparición y se pierde la relación entre el elemento y el sitio al que se fue.

Lo que se mueve dentro de la pantalla usa inOut. Un elemento que se recoloca sin entrar ni salir tiene principio y final visibles, así que necesita frenar en los dos extremos. Un out en un movimiento interno se lee como un tirón inicial.

// Entrada.
gsap.from('.modal', { y: 40, autoAlpha: 0, duration: 0.45, ease: 'power2.out' });

// Salida, mas rapida y con la curva contraria.
gsap.to('.modal', { y: 30, autoAlpha: 0, duration: 0.3, ease: 'power2.in' });

// Recolocacion dentro de la pantalla.
gsap.to('.tarjeta', { x: 240, duration: 0.6, ease: 'power2.inOut' });