Por qué GSAP: cuando el CSS ya no alcanza

En el módulo 11 hiciste animaciones CSS impresionantes. Pero llega un punto —secuencias largas, control por scroll, coreografías que se pausan y reversan— donde el CSS se pelea contigo. Ahí empieza GSAP: la librería con la que se construyen los sitios premiados en Awwwards. No reemplaza al CSS; toma el relevo cuando el CSS ya no da más. Hoy ves por qué, y corres tu primera animación GSAP.

De la caja de música a la mesa de mezclas

Los límites del CSS que GSAP resuelve

El CSS del módulo 11 es perfecto para microinteracciones. GSAP entra cuando necesitas:

• Secuencias complejas y controlables: coreografías de 8 pasos que se pausan, reversan o saltan — donde encadenar animation-delay a mano se vuelve un infierno (lo sufriste en M11).
• Animación ligada al SCROLL con control fino: no solo "revelar al entrar" (eso ya lo hace el CSS), sino ANCLAR un elemento y hacer que su animación avance exactamente con el scroll (scrub), con precisión total y en todos los navegadores (ScrollTrigger, lección 4).
• Valores dinámicos y físicas: animar a posiciones calculadas en JS, con inercia, rebotes elásticos y motion paths.
• Consistencia entre navegadores: GSAP suaviza las diferencias que en CSS puro te obligan a mil ajustes.

Regla honesta: si el CSS lo hace bien, usa CSS (es más liviano y no necesita librería). GSAP es para cuando el CSS te empieza a estorbar. Saber dónde está esa línea es criterio profesional.

Tu primer tween

La unidad de GSAP es el "tween": animar algo de un estado a otro.

import gsap from "gsap";

// gsap.to: animar HACIA estos valores desde el estado actual
gsap.to(".caja", { x: 200, rotation: 360, duration: 1, ease: "power2.out" });

// gsap.from: animar DESDE estos valores hacia el estado natural (entradas)
gsap.from(".tarjeta", { y: 40, opacity: 0, duration: 0.8, stagger: 0.15 });

gsap.to(selector, { ...propiedades, duration, ease }) es el corazón: seleccionas (acepta selectores CSS o elementos), listas las propiedades destino, y GSAP interpola. Fíjate en stagger: 0.15 — el escalonado que en el módulo 11 armaste a mano con --i y calc(), aquí es UNA propiedad.

Míralo: una entrada escalonada

Cuatro cajas entran en cascada con un frenado suave, y solo escribiste un gsap.from. Compáralo con el módulo 11: allí necesitabas @keyframes, --i en el HTML, calc() y backwards. GSAP colapsa todo eso en una llamada — y como es JS, puedes dispararlo cuando quieras, no solo al cargar. (Nota el if (!quieto): la empatía de reduced-motion sigue siendo tuya; GSAP no la pone sola.)

Mini-reto

En el playground, cambia el ease a otros de GSAP y siente la diferencia: "back.out(2)" (se pasa y vuelve, como el overshoot del módulo 10), "elastic.out(1, 0.3)" (rebote elástico, imposible con un solo cubic-bezier), "bounce.out" (rebota como pelota). Luego sube el stagger a 0.4 y bájalo a 0.05. Explorar los eases premiados de GSAP es medio camino hacia el "look Awwwards".

Qué sigue

Ya corriste un tween. La próxima lección profundiza en el vocabulario básico: gsap.to, from, fromTo, y el sistema de easings de GSAP —las curvas de movimiento que, bien elegidas, son el 80% de la sensación premium.