gsap scrolltrigger x code example

Example: 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"
});