GSAP ScrollTrigger

Activa animaciones basadas en el scroll. Con scrub: true la animación sigue el ritmo exacto del scroll.

trigger

stagger

scrub

En una landing real esto se activa al hacer scroll. Aquí simulamos la animación con el botón.

Código

gsap.registerPlugin(ScrollTrigger)

// Se activa cuando el elemento entra en pantalla
gsap.from(element, {
  scrollTrigger: {
    trigger: element,
    start: "top bottom",
    end: "top 30%",
    scrub: true,
  },
  opacity: 0,
  y: 60,
})