GSAP ScrollTrigger — Demo Cultiva Digital Studio

Técnicas ScrollTrigger

Los 4 pilares del scroll animado

Cada técnica cubre un caso de uso distinto. Combínalas para crear experiencias de scroll inmersivas y fluidas.

◈

Basic Trigger

Vincula una animación GSAP al scroll. Define cuándo empieza y termina con start / end y controla el comportamiento con toggleActions.

toggleActions: "play reverse play reverse"

⟲

Scrub

Vincula el progreso de la animación directamente a la posición del scroll. Con scrub: 1 añade suavizado. Ideal para efectos parallax y transiciones cinematográficas.

scrub: 1 // segundos de lag

⊞

Pin + ScrollTrigger

Fija un elemento en pantalla mientras el usuario sigue scrollando. El contenido interior se anima mientras el contenedor está "pinado". Perfecto para secciones de storytelling.

pin: true, end: "+=1000"

▤

Batch

Anima múltiples elementos que entran en viewport simultáneamente con un solo stagger coordinado. Alternativa eficiente al IntersectionObserver.

ScrollTrigger.batch(".cards", ...)

Código de referencia

Timeline + scrub + pin

El patrón más potente: una timeline GSAP controlada por scroll con el elemento padre fijado. Todas las animaciones dentro de la timeline se sincronizan con el scroll.

1. Registra el plugin una sola vez al inicio.

2. Crea la timeline con ScrollTrigger en el config, no en tweens hijos.

3. pin: true fija el trigger; scrub: 1 suaviza.

4. Los tweens hijos no llevan scrollTrigger propio.

scroll-animation.js

// 1. Registrar el plugin (una vez)
gsap.registerPlugin(ScrollTrigger);

// 2. Timeline con scrub + pin
const tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".container",
    start:   "top top",
    end:     "+=2000",
    scrub:   1,
    pin:     true,
    markers: false  // true solo en dev
  }
});

// 3. Tweens hijos — sin scrollTrigger propio
tl.to(".title",  { y: -60, opacity: 0 })
  .to(".panel-2",{ x: 0, opacity: 1 }, "<+0.2")
  .to(".panel-3",{ scale: 1, opacity: 1 });

// 4. Batch para stagger coordinado
ScrollTrigger.batch(".card", {
  start:   "top 85%",
  once:    true,
  onEnter: (els) =>
    gsap.to(els, {
      opacity: 1,
      y: 0,
      stagger: 0.15,
      overwrite: true
    })
});

// 5. Cleanup en SPA (React / Vue)
ScrollTrigger.getAll()
  .forEach(t => t.kill());
    

Patrones avanzados

Casos de uso comunes

Cada patrón resuelve un problema específico de UX. Usa el adecuado según el efecto que buscas.

↔

Scroll horizontal falso

Pina una sección y mueve el contenido en X mientras el usuario hace scroll vertical. Usa containerAnimation y ease: "none" obligatoriamente.

containerAnimation

↕

Parallax con scrub

Elementos que se mueven a velocidades distintas durante el scroll. Combina múltiples tweens con diferentes start/end y scrub.

scrub + múltiples triggers

⬛

Section reveal en batch

Tarjetas que entran en viewport con stagger coordinado. Mucho más eficiente que un ScrollTrigger por elemento, especialmente en listas largas.

ScrollTrigger.batch()

🔗

Integración Lenis/Locomotive

Cuando usas smooth scroll de terceros, necesitas scrollerProxy() para que ScrollTrigger lea la posición correcta del scroll virtual.

scrollerProxy

⏱

Snap entre secciones

El playhead "salta" a puntos concretos al soltar el scroll. Define snap: 1/N para N secciones, o un array de valores de progreso.

snap: { snapTo, duration }

🏷

toggleClass en scroll

Añade/elimina clases CSS cuando el ScrollTrigger entra y sale. Útil para activar transiciones CSS o cambiar el estado de la UI sin necesidad de tweens.

toggleClass

✓

Buenas prácticas

✅ Llama a gsap.registerPlugin(ScrollTrigger) una sola vez antes de cualquier uso.
✅ Pon ScrollTrigger en la timeline, nunca en tweens hijos de esa timeline.
✅ Usa ease: "none" en el tween horizontal cuando uses containerAnimation.
✅ Llama a ScrollTrigger.refresh() tras cambios de DOM o carga de imágenes dinámicas.
✅ En React, usa el hook useGSAP() de @gsap/react para cleanup automático.
✅ Crea ScrollTriggers de arriba a abajo (orden de aparición en la página) o usa refreshPriority.

Antipatrones

❌ Mezclar scrub y toggleActions en el mismo ScrollTrigger; scrub siempre gana.
❌ Poner ScrollTrigger dentro de un tween hijo de una timeline. Solo en tweens top-level o en la timeline.
❌ Usar ease distinto de "none" en la animación horizontal con containerAnimation.
❌ Dejar markers: true en producción. Solo para desarrollo.
❌ Olvidar matar los ScrollTriggers en SPAs al cambiar de ruta. Usa getAll().forEach(t => t.kill()).
❌ Animar el elemento pinado directamente; anima los hijos del elemento pinado.

Animaciones que
viven en el scroll

Los 4 pilares del scroll animado

Basic Trigger

Scrub

Pin + ScrollTrigger

Batch

Cómo funciona internamente

Timeline + scrub + pin

Casos de uso comunes

Scroll horizontal falso

Parallax con scrub

Section reveal en batch

Integración Lenis/Locomotive

Snap entre secciones

toggleClass en scroll

Webs que se mueven contigo

Animaciones que viven en el scroll

Los 4 pilares del scroll animado

Basic Trigger

Scrub

Pin + ScrollTrigger

Batch

Cómo funciona internamente

Timeline + scrub + pin

Casos de uso comunes

Scroll horizontal falso

Parallax con scrub

Section reveal en batch

Integración Lenis/Locomotive

Snap entre secciones

toggleClass en scroll

Webs que se mueven contigo

Animaciones que
viven en el scroll