Experimento 02

Scroll
Trigger

Lenis para scroll suave. ScrollTrigger para animar al hacer scroll. Tres conceptos: trigger, scrub, pin.

scroll para explorar

Concepto 01 — Trigger

El elemento anima
cuando entra al viewport

scrollTrigger: { trigger: el } — La animación dispara una vez cuando el elemento cruza el umbral definido. Sin scrub: reproduce la animación completa de una.

trigger

trigger: "#el"

Qué elemento dispara

start

"top 80%"

Cuándo empieza

end

"bottom 20%"

Cuándo termina

toggleActions

"play none none none"

Qué hace en cada estado

Concepto 02 — Scrub

La animación sigue
el scroll exacto

scrub: true vincula el progreso de la animación al progreso del scroll. Si scrolleas hacia arriba, la animación retrocede.

demo scrub — barra de progreso

scrub: 0%

código

gsap.to("#el", {
  opacity: 1,
  x: 200,
  scrollTrigger: {
    trigger: "#el",
    start: "top 70%",
    end: "bottom 30%",
    scrub: true,  // ← vinculado al scroll
  },
});

Concepto 03 — Pin

El elemento se congela
mientras scrolleas

pin: true fija el elemento en pantalla mientras el scroll continúa. Ideal para transiciones de sección o texto que persiste mientras cambia el contenido de fondo.

pin activo

Estoy fijo.
El contenido cambia.

Este panel permanece en pantalla mientras scrolleas. A la derecha, el contenido evoluciona según el progreso.

progreso del pin

paso 1

ScrollTrigger detecta que el panel entró al viewport.

paso 2

El elemento se ancla. El scroll del usuario mueve el wrapper.

paso 3

Al llegar al final, el pin se libera y el scroll continúa.

Resumen

Los tres conceptos
en acción

siguiente

03 — Text Reveal

→