La línea de tiempo del grupo: leer la coreografía

Una transición de interfaz que se percibe como torpe casi nunca lo es por la curva de una animación individual: lo es porque cinco animaciones que deberían contarse una historia empiezan y acaban en momentos que no se corresponden con nada. La línea de tiempo del panel dibuja esas cinco barras una debajo de otra, en la misma escala, y hace visible la coreografía completa. Es la vista que convierte una impresión vaga en un defecto concreto que se puede corregir con un número.

Qué dibuja cada fila

Cada animación del grupo es una fila con una barra sobre la escala de tiempo compartida.

El tramo previo a la barra es el retraso. El tiempo que la animación espera antes de empezar. Se ve como espacio vacío a la izquierda.

La barra es la duración de una iteración. Su longitud sobre la escala común es lo que permite comparar dos animaciones de un vistazo.

Las repeticiones se dibujan como barras consecutivas. Una animación con tres iteraciones ocupa tres veces el ancho de una.

Los puntos sobre la barra son los fotogramas clave, cuando la animación los tiene. Su posición dice dónde ocurre cada cambio dentro del recorrido, que no siempre es donde uno cree al leer los porcentajes.

Y hay un elemento que atraviesa todas las filas: el cursor de tiempo, que se puede arrastrar. Al moverlo, la página se actualiza mostrando el estado exacto de todas las animaciones en ese instante.

Los cuatro defectos de coordinación

Todo a la vez. Todas las barras empiezan en la misma vertical y tienen la misma longitud. Es el defecto por defecto, literalmente: es lo que sale cuando se aplica la misma transición a varios elementos sin pensar. Produce un movimiento que se percibe como mecánico, porque en el mundo físico las cosas no se mueven todas a la vez y con la misma velocidad.

El arreglo es un escalonamiento: pequeños retrasos crecientes entre elementos relacionados. La cantidad correcta suele ser mucho menor de lo que la gente pone; unas decenas de milisegundos por elemento bastan para que la secuencia se lea como tal.

El hueco muerto. Una barra acaba y la siguiente empieza bastante después, dejando un tramo en el que no ocurre nada. Se ve inmediatamente en la línea de tiempo como un espacio vacío entre bloques. La percepción es de tartamudeo. El arreglo es solapar: que la siguiente empiece antes de que la anterior termine del todo.

El desbordamiento. Una animación mucho más larga que las demás alarga el grupo entero, y el usuario percibe la transición como terminada mucho antes de que lo esté. Es especialmente dañino cuando esa animación larga bloquea algo: si la interfaz no acepta interacción hasta que la transición acabe, el usuario espera mirando algo que ya parece quieto.

El orden invertido. Los elementos entran en un orden que no corresponde a su jerarquía visual: primero el detalle y después el contenedor, o de abajo arriba cuando el ojo lee de arriba abajo. En la línea de tiempo se ve comparando el orden vertical de las barras con el orden espacial de los elementos, y al pasar el ratón por cada fila se resalta su elemento en la página, que es la forma de comprobarlo.

Del panel al código

Cada fila del panel enlaza con su origen. Al pasar el ratón se resalta el elemento en la página, y la información de la animación indica el nombre de la regla de fotogramas clave o la propiedad de la transición.

Con eso, encontrar la declaración responsable en el panel de estilos es directo. Y en el caso de las animaciones creadas por código, el objeto de animación es accesible desde la consola con la consulta del documento, lo que permite inspeccionar sus tiempos exactos:

// Del panel al codigo: inspeccionar los tiempos exactos de una animacion
(() => {
  window.detallarAnimacion = (indice = 0) => {
    const a = document.getAnimations()[indice];
    if (!a) return console.warn('No hay animacion en el indice', indice);

    const t = a.effect.getTiming();
    const c = a.effect.getComputedTiming();
    console.log('Objetivo:', a.effect.target);
    console.table([{
      retrasoMs: t.delay,
      duracionMs: t.duration,
      retrasoFinalMs: t.endDelay,
      iteraciones: t.iterations,
      inicioIteracion: t.iterationStart,
      direccion: t.direction,
      relleno: t.fill,
      curva: t.easing
    }]);
    console.table([{
      duracionTotalMs: Math.round(c.endTime),
      progresoActual: c.progress?.toFixed(3) ?? '(fuera del tramo activo)',
      iteracionActual: c.currentIteration ?? '-',
      estado: a.playState,
      velocidad: a.playbackRate
    }]);

    // Los fotogramas clave, si el efecto es de keyframes
    if (a.effect.getKeyframes) console.table(a.effect.getKeyframes());
    return a;
  };

  window.irA = (indice, fraccion) => {
    const a = document.getAnimations()[indice];
    if (!a) return;
    const total = a.effect.getComputedTiming().endTime;
    a.pause();
    a.currentTime = total * fraccion;
    console.log('Colocada al', Math.round(fraccion * 100) + '% ->', Math.round(a.currentTime), 'ms');
    return a;
  };

  console.log('Usa detallarAnimacion(0) y irA(0, 0.35)');
})();

La distinción entre los tiempos declarados y los computados es informativa: los primeros son lo que escribiste, los segundos incluyen la resolución de valores automáticos y el tiempo total con todas las iteraciones. Cuando una animación dura más de lo que esperabas, la respuesta suele estar en esa segunda tabla.

La función que coloca una animación en una fracción concreta hace desde código lo mismo que arrastrar el cursor, y es útil cuando hace falta reproducir un estado exacto varias veces.

Un patrón de coreografía

El escalonamiento es la técnica que corrige el primero de los cuatro defectos y merece un ejemplo completo, porque hacerlo bien tiene un detalle que casi siempre se pasa por alto.

// Entrada escalonada con salida en orden inverso
function entradaEscalonada(elementos, { paso = 40, duracion = 320 } = {}) {
  return elementos.map((el, i) =>
    el.animate(
      [
        { opacity: 0, transform: 'translateY(12px)' },
        { opacity: 1, transform: 'none' }
      ],
      { duration: duracion, delay: i * paso, easing: 'cubic-bezier(.2,.8,.2,1)', fill: 'both' }
    )
  );
}

function salidaEscalonada(elementos, { paso = 25, duracion = 200 } = {}) {
  const n = elementos.length;
  return elementos.map((el, i) =>
    el.animate(
      [{ opacity: 1, transform: 'none' }, { opacity: 0, transform: 'translateY(8px)' }],
      { duration: duracion, delay: (n - 1 - i) * paso, easing: 'cubic-bezier(.4,0,1,1)', fill: 'both' }
    )
  );
}

// Ejemplo ejecutable
const contenedor = document.createElement('ul');
contenedor.style.cssText = 'list-style:none;padding:0;font:15px system-ui';
document.body.append(contenedor);
const items = ['Primero', 'Segundo', 'Tercero', 'Cuarto', 'Quinto'].map(txt => {
  const li = document.createElement('li');
  li.textContent = txt;
  li.style.cssText = 'padding:8px 12px;margin:4px 0;background:#89b4fa;color:#11111b;border-radius:8px';
  contenedor.append(li);
  return li;
});

const entrada = entradaEscalonada(items);
Promise.all(entrada.map(a => a.finished))
  .then(() => new Promise(r => setTimeout(r, 800)))
  .then(() => salidaEscalonada(items));

El detalle que casi nadie aplica es que la salida va en orden inverso y más rápida que la entrada. En orden inverso porque lo último que entró es lo que está más cerca de la atención del usuario; y más rápida porque una salida lenta se percibe como una espera, mientras que una entrada lenta se percibe como algo que se presenta. Esa asimetría entre entrada y salida es una de las diferencias más visibles entre una interfaz que se siente cuidada y otra que no, y en la línea de tiempo del panel se ve como dos bloques de formas distintas.