gsap scrolltrigger demo code example

Example 1: gsap scroll trigger

gsap.registerPlugin(ScrollTrigger);


let tl_main = gsap.timeline({ paused: true });
var crc1 = document.querySelector('.path-18');
var l = crc1.getTotalLength();

// tl first circle
let tl_circle1 = gsap.timeline();
tl_circle1.fromTo(crc1, 3, { strokeDashoffset: 0 }, { strokeDashoffset: l });


ScrollTrigger.create({ // first circle animation
    trigger: '.process-trigger',
    start: "top center",
    end: "bottom bottom",
    markers: true,
    animation: tl_circle1,
    toggleActions: "play none none none",
    ease: "power2"
});

Example 2: gsap pin scrolltrigger

gsap.registerPlugin(ScrollTrigger);

gsap.utils.toArray('.layer').forEach(layer => {
  ScrollTrigger.create({
    trigger: layer,
    pin: true,
    start: 'top top',
    pinSpacing: false,
  });
});