// Registrar ScrollTrigger gsap.registerPlugin(ScrollTrigger); // ── Reveal con stagger ── gsap.from('.card', { opacity: 0, y: 50, duration: 0.8, stagger: 0.12, ease: 'expo.out', scrollTrigger: { trigger: '.cards', start: 'top 80%', // play / pause / resume / reset toggleActions: 'play none none reverse' } }); // ── Counter animado ── const obj = { val: 0 }; gsap.to(obj, { val: 98, snap: { val: 1 }, onUpdate() { el.textContent = obj.val + '%'; }, scrollTrigger: { trigger: el, start: 'top 75%' } }); // ── Scrub: valor ligado al scroll ── gsap.to('.panel', { xPercent: -100, ease: 'none', scrollTrigger: { trigger: '.pinned', pin: true, scrub: 1, // lag en segundos end: '+=2000' } });
toggleActions — 4 estados:
onEnter · onLeave · onEnterBack · onLeaveBack
scrub: 1 — el tween sigue al
scroll con 1s de lag para suavidad.
pin: true — fija el elemento
mientras el scroll avanza dentro de él.