Los eases configurables: back, elastic, bounce y steps

Cuatro familias del catálogo aceptan configuración, y son precisamente las que se salen del rango de progreso normal o lo rompen en trozos. back se pasa del destino una vez, elastic oscila alrededor de él, bounce rebota contra él, y steps renuncia a la continuidad. Las tres primeras son intentos de simular física con una fórmula cerrada, y saber exactamente qué hace cada parámetro —con números, no con adjetivos— es lo que separa ajustarlas de darles al azar hasta que quede bien.

back: un solo sobrepaso

back toma un parámetro, el sobrepaso, cuyo valor por defecto es 1.70158. Ese número tan raro viene de las ecuaciones de Robert Penner y está elegido para producir un sobrepaso de exactamente el 10%.

gsap.to('.caja', { x: 300, duration: 0.6, ease: 'back.out(1.7)' });

Cuánto se pasa el elemento según el valor:

Con el valor por defecto, un panel que recorre 400 píxeles se pasa 40 y vuelve. Con back.out(4), se pasa 152, que ya es una exageración deliberada y en una interfaz seria se lee como un error.

Las tres variantes hacen cosas distintas y conviene tenerlas claras. back.out se pasa al final, que es el rebote clásico de llegada. back.in se pasa al principio, en sentido contrario: el elemento retrocede antes de salir, que es la anticipación de la animación tradicional. back.inOut hace las dos.

// Anticipacion: retrocede un poco antes de salir disparado.
gsap.to('.flecha', { x: 200, duration: 0.5, ease: 'back.in(2)' });

back.in es de los eases peor aprovechados del catálogo. La anticipación —el movimiento contrario que precede a la acción— es uno de los principios fundamentales de la animación clásica y en interfaces casi no se usa, cuando es exactamente lo que hace que un botón que dispara algo se sienta con intención en vez de con desgana.

elastic: dos parámetros y una oscilación

elastic toma amplitud y periodo, con valores por defecto de 1 y 0.3 para las variantes in y out, y 1 y 0.45 para inOut.

gsap.to('.caja', { x: 300, duration: 1.1, ease: 'elastic.out(1, 0.3)' });

La amplitud escala el tamaño del sobrepaso. Con 1, el máximo es 1,3731: se pasa un 37%. Con 2, el máximo sube a 2,0553, es decir, el elemento llega a estar al doble de la distancia que tenía que recorrer. Valores por debajo de uno no reducen el sobrepaso de la forma que esperarías, porque el motor ajusta el periodo internamente para que la curva siga arrancando en cero; para amortiguar el efecto se usa el periodo, no la amplitud.

El periodo controla cada cuánto oscila, y su efecto sobre el sobrepaso es indirecto y muy fuerte: como el primer pico ocurre más tarde con periodos grandes, la envolvente exponencial ha decaído más cuando llega, y el sobrepaso resulta menor.

Con elastic.out(1, 0.3), la trayectoria muestreada es esta:

Se lee la física: se pasa un 25%, vuelve, se queda corto un 12,5%, y se va apagando. Es una oscilación amortiguada, igual que la de un muelle subamortiguado, con la diferencia de que aquí la envolvente y la frecuencia son parámetros libres en vez de consecuencias de una masa y una rigidez.

bounce: rebotes contra un suelo

bounce no toma parámetros. Es una función a trozos con cuatro parábolas de amplitud decreciente, y simula algo conceptualmente distinto de elastic: una pelota que cae y rebota contra una superficie.

La diferencia importa. elastic oscila alrededor del destino, pasándose por los dos lados. bounce nunca se pasa: llega al destino, rebota hacia atrás, vuelve, rebota menos, y así hasta pararse.

Ninguno de esos valores supera el uno, y ninguno lo hará. Eso lo convierte en el único ease de esta familia que se puede usar sobre propiedades acotadas sin romper nada: una opacidad con elastic produce valores por encima de uno y por debajo de cero, que el navegador recorta y por tanto se ven como pausas planas; con bounce no ocurre.

bounce.out es el que simula la caída. bounce.in es su inverso y se lee como algo que va cogiendo carrerilla a saltos, que es un efecto extraño y rara vez útil.

steps: renunciar a la continuidad

steps toma un número de pasos y, opcionalmente, un segundo argumento booleano que hace que el primer salto ocurra inmediatamente en lugar de al final del primer intervalo.

gsap.to('.sprite', {
  backgroundPosition: '-1200px 0',
  duration: 1,
  ease: 'steps(12)',
  repeat: -1,
});

Con steps(4), el valor a lo largo del recorrido es este:

Cuatro pasos producen cinco valores distintos —incluidos los dos extremos— y el elemento pasa el mismo tiempo en cada uno. Es la curva de las animaciones de sprites, de los contadores que saltan de unidad en unidad, y de cualquier cosa que deba sentirse mecánica.

El segundo parámetro se nota en los extremos: con steps(4, true) el valor arranca ya en 0.25 en lugar de en 0, lo cual importa cuando cada paso corresponde a un fotograma de una hoja de sprites y el primero ya está pintado en el estado inicial.

steps también es la forma correcta de conseguir un efecto de “baja frecuencia de imagen” deliberado, muy usado para dar aspecto de animación tradicional a doce fotogramas por segundo: un steps(12) sobre un tween de un segundo produce exactamente eso.