SVG Draw

Lesson 11

Each <path> gets strokeDasharray and strokeDashoffset both set to path.getTotalLength(). This makes the entire path invisible (the dash offset shifts the dash completely out of view). GSAP tweens strokeDashoffset to 0 with scrub: 1, drawing the path progressively as the user scrolls.

Source Code script.js

gsap.registerPlugin(ScrollTrigger);

// Animate all .draw-path elements via scroll
document.querySelectorAll('.section').forEach((section) => {
  const paths = section.querySelectorAll('.draw-path');

  paths.forEach((path) => {
    const length = path.getTotalLength();

    // Set up the dash
    gsap.set(path, {
      strokeDasharray: length,
      strokeDashoffset: length,
    });

    // Animate dash offset as section scrolls in
    gsap.to(path, {
      strokeDashoffset: 0,
      ease: 'none',
      scrollTrigger: {
        trigger: section,
        start: 'top 80%',
        end: 'bottom 40%',
        scrub: 1,
      },
    });
  });
});