Timelines: coreografías con control total

Un tween anima una cosa. Una animación premium coordina MUCHAS en una secuencia exacta: el logo aterriza, luego entra el título, después el subtítulo, y remata el botón. Encadenar eso con delays a mano es frágil (lo sufriste en CSS). La TIMELINE de GSAP es la herramienta estrella: colocas tus tweens en una línea de tiempo compartida y obtienes control total sobre toda la secuencia.

La línea de tiempo del editor de video

Encadenar: cada tween después del anterior

// crear la timeline y encadenar tweens con .to()/.from()
const tl = gsap.timeline({ defaults: { duration: 0.6, ease: "power3.out" } });

tl.from(".logo",   { y: -30, opacity: 0, ease: "back.out(2)" })
.from(".titulo", { y: 30, opacity: 0 })      // arranca cuando el logo termina
.from(".sub",    { y: 20, opacity: 0 })
.from(".cta",    { scale: 0, opacity: 0, ease: "back.out(1.7)" });

Por defecto cada tween empieza cuando termina el anterior — la secuencia "uno tras otro" sin calcular tiempos. El defaults evita repetir duration y ease en cada línea. Cambia la duración del logo y TODO lo demás se recorre solo: eso es lo que a mano era una pesadilla.

El position parameter: controlar el solapamiento

Rara vez quieres "uno EXACTAMENTE tras otro" — lo natural es que se solapen un poco. El segundo argumento de cada tween controla CUÁNDO empieza:

tl.from(".logo", { y: -30, opacity: 0 })
// "-=0.3": empieza 0.3s ANTES de que el anterior termine (se solapan)
.from(".titulo", { y: 30, opacity: 0 }, "-=0.3")
// "<": empieza JUNTO con el anterior (a la vez)
.from(".sub", { opacity: 0 }, "<")
// "+=0.5": deja un HUECO de 0.5s antes de empezar
.from(".cta", { scale: 0 }, "+=0.5");

Las claves: "-=0.3" (solapa, el más usado para que fluya), "+=0.5" (hueco), "<" (a la vez que el anterior), ">" (justo al final del anterior). Con estos ajustas el RITMO de la coreografía sin tocar duraciones.

Una entrada de hero coreografiada

Las cuatro piezas entran en una cascada fluida —con solapamientos de -=0.2 y -=0.35— y el botón "Repetir" reproduce toda la timeline con restart(). Nota cuánto control tienes sobre la SECUENCIA completa como una sola unidad.

Controlar la película entera

const tl = gsap.timeline();
// ...tweens...
tl.pause();          // congelar
tl.play();           // reanudar
tl.reverse();        // reproducir hacia atrás (¡toda la coreografía!)
tl.restart();        // volver al inicio y reproducir
tl.timeScale(2);     // el doble de rápido (0.5 = mitad de velocidad)

Poder REVERSAR una secuencia entera con reverse() —o cambiar su velocidad con timeScale()— es lo que hace a las timelines insustituibles para menús que abren y cierran, o animaciones que responden a la interacción. Una cosa, control total.

Mini-reto

Convierte la entrada de "El Observador" en una timeline: logo, luego el menú de secciones (con un pequeño stagger entre los enlaces — sí, funciona dentro de un tween de timeline), luego la noticia destacada. Juega con los position parameters para que fluya, y añade un botón que haga reverse() de toda la secuencia. Sentir la coreografía como una sola pieza controlable es el salto mental de este módulo.

Qué sigue

Ya coordinas el tiempo. Ahora atamos el tiempo al SCROLL: la herramienta que hizo famoso a GSAP y define los sitios de Awwwards —ScrollTrigger—. Anclar elementos, hacer que una animación avance con la rueda del mouse (scrub), y disparar coreografías al llegar a cada sección.