Tweens y easings: el vocabulario de GSAP

Un tween es la unidad básica de GSAP: animar "algo" de un estado a otro. Hay tres formas de crearlo —to, from, fromTo— y sobre ellas, el sistema de easings de GSAP, que es donde vive la sensación "premium". Domina estas cuatro cosas y ya puedes construir la mayoría de las animaciones que ves en sitios de portafolio.

to, from, fromTo: los tres tweens

// TO: del estado actual → a estos valores (lo más común)
gsap.to(".caja", { x: 300, opacity: 0.5, duration: 1 });

// FROM: desde estos valores → al estado natural (entradas al cargar)
gsap.from(".titulo", { y: -40, opacity: 0, duration: 0.8 });

// FROMTO: control total de ambos extremos
gsap.fromTo(".barra", { scaleX: 0 }, { scaleX: 1, duration: 1.2, ease: "power2.inOut" });

Sobre las propiedades: GSAP anima casi cualquier cosa —opacity, rotation, scale, colores, y cualquier propiedad CSS— pero para mover y transformar usa los atajos x y y (equivalen a transform: translate, la propiedad barata del módulo 11) en vez de left/top. Regla de oro intacta: GSAP anima x/y/scale/opacity por rendimiento, igual que aprendiste.

Los easings: donde vive lo "premium"

El módulo 10 te enseñó ease-out y cubic-bezier. GSAP trae un catálogo mucho más rico, y elegir bien es el 80% de la sensación de calidad:

// familias "power" (power1 a power4): el frenado estándar, cada vez más marcado
gsap.to(".a", { x: 200, ease: "power3.out" });   // out = entra rápido, frena suave

// back: se PASA de la meta y regresa (el overshoot del módulo 10)
gsap.to(".b", { x: 200, ease: "back.out(1.7)" });

// elastic y bounce: física imposible con un solo cubic-bezier
gsap.to(".c", { x: 200, ease: "elastic.out(1, 0.3)" });  // rebote elástico
gsap.to(".d", { x: 200, ease: "bounce.out" });           // rebota como pelota

Cada familia tiene .in (arranca lento), .out (frena lento — el de las entradas), e .inOut (ambos). La regla del módulo 10 sigue: .out para lo que entra. Pero back, elastic y bounce te dan movimientos que en CSS puro eran imposibles o dolorosos.

Compáralos en vivo

Dale a "Animar" y observa las cinco curvas correr a la vez: none es robótico, power3.out es el elegante de siempre, y back/elastic/bounce tienen "vida" — se pasan, rebotan, vibran. Ese vocabulario de movimiento es lo que separa una web que "se mueve" de una que "se siente".

Mini-reto

Anima el logo de "El Observador" al cargar: que entre con gsap.from (desde y: -30 y opacity: 0) usando back.out(2) para un aterrizaje con carácter, y que su tagline aparezca justo después. Prueba a cambiar el ease del logo por elastic.out(1, 0.4) y decide cuál le queda a la personalidad de tu marca. Elegir el ease ES elegir el tono.

Qué sigue

Un tween anima una cosa. Pero una animación premium coordina MUCHAS en secuencia precisa —el logo, luego el menú, luego el hero—. Encadenar tweens a mano con delays es frágil (lo viste en CSS). La próxima lección trae la herramienta estrella de GSAP: las TIMELINES, coreografías con control total.