ScrollTrigger: animaciones ancladas al scroll

Esta es la herramienta que hizo a GSAP famoso y define el look de Awwwards: ScrollTrigger. Convierte el scroll del usuario en el control de tus animaciones — revelar al entrar (eso ya lo hacía el CSS), pero también ANCLAR un elemento en pantalla mientras avanzas, y hacer que una animación progrese exactamente con la rueda del mouse. Hoy desbloqueas el scrollytelling.

El scroll como mando de la película

Setup: registrar el plugin

ScrollTrigger es un plugin; se importa y se registra una vez:

import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);   // una vez, al inicio

Los dos modos: disparar vs scrubbing

// MODO 1 — DISPARAR: la animación corre sola al entrar el elemento
gsap.from(".tarjeta", {
y: 50, opacity: 0, duration: 0.8,
scrollTrigger: {
  trigger: ".tarjeta",          // qué elemento vigilar
  start: "top 85%",             // cuando su top llega al 85% del viewport
  toggleActions: "play none none reverse",  // entra: play; sale hacia arriba: reverse
},
});

// MODO 2 — SCRUB: el progreso se ATA al scroll (avanza y retrocede con la rueda)
gsap.to(".barra", {
scaleX: 1, ease: "none",
scrollTrigger: {
  trigger: ".seccion",
  start: "top center", end: "bottom center",
  scrub: true,                  // ← la clave: sin duración, la marca el scroll
},
});

La diferencia es enorme: sin scrub, la animación se DISPARA al entrar y corre a su duración (como el reveal del módulo 11, pero con reverse al salir). Con scrub: true, no hay duración — el progreso 0→100% se mapea al recorrido del scroll entre start y end, así que el usuario "arrastra" la animación. start/end definen el tramo: "top center" = "cuando el top del trigger toca el centro del viewport".

Míralo: scrub + reveal

Desplázate por el panel y mira la caja moverse y girar EXACTAMENTE al ritmo de tu scroll —adelante y atrás—: eso es scrub. Sigue bajando y el título "Reveal al entrar" se dispara al aparecer. Dos comportamientos, un plugin.

pin y snap: el scrollytelling

Los dos ingredientes que completan el efecto Awwwards:

// PIN: fija un elemento en pantalla mientras el scroll "atraviesa" su sección
ScrollTrigger.create({
trigger: ".seccion-fija",
start: "top top", end: "+=1000",   // se queda pegada durante 1000px de scroll
pin: true,                         // ← el elemento se congela y el resto sigue
});

// SNAP: el scroll "encaja" en puntos concretos (secciones de pantalla completa)
gsap.to(".paneles", {
xPercent: -300, ease: "none",
scrollTrigger: {
  trigger: ".contenedor", pin: true, scrub: 1,
  snap: 1 / 3,                     // encaja en cada uno de los 4 paneles
},
});

pin es lo que ves cuando una sección "se queda quieta" mientras su contenido se anima y luego suelta (el corazón del scrollytelling); snap hace que el scroll se acomode en puntos exactos, como el famoso "scroll horizontal por secciones". Los combinarás en el proyecto final del módulo.

Mini-reto

Ponle a "El Observador" dos efectos de scroll con GSAP: (1) una barra de progreso de lectura arriba, con scrub atado a todo el artículo; (2) las imágenes que entran con un gsap.from disparado por su propio ScrollTrigger (toggleActions). Compáralo con la versión CSS del módulo 11: misma idea, pero ahora controlas start/end al píxel. Y no olvides el guard de reduced-motion envolviendo los triggers.

Qué sigue

Con timelines y ScrollTrigger tienes el motor del scrollytelling. La próxima lección los pone al servicio de los efectos INSIGNIA que reconoces de los sitios premiados: parallax por capas, texto que se revela palabra por palabra, y secciones horizontales. La caja de trucos de Awwwards.