SVG Js Libraries

<!doctype html>
<title>Example</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>

<rect class="gsap-shape" x="20" y="30" width="10" height="40" fill="#64748b" rx="2" />
  <rect class="gsap-shape" x="40" y="30" width="10" height="40" fill="#94a3b8" rx="2" />
  <rect class="gsap-shape" x="60" y="30" width="10" height="40" fill="#cbd5e1" rx="2" />
  <rect class="gsap-shape" x="80" y="30" width="10" height="40" fill="#e2e8f0" rx="2" />

<circle id="gsap-ring" cx="140" cy="40" r="30" fill="none" stroke="tomato" stroke-width="4" stroke-dasharray="188.5" stroke-dashoffset="188.5" stroke-linecap="round" />

<circle id="gsap-dot" cx="140" cy="40" r="0" fill="gold" />

<text x="100" y="90" font-size="5" text-anchor="middle" font-family="sans-serif" fill="#666">Click SVG to Restart Animation</text>
</svg>

// 1. Staggered reveal of rectangles
    tl.to(".gsap-shape", {
      opacity: 1,
      y: -10,
      duration: 0.6,
      stagger: 0.4,
      ease: "back.out(1.7)"
    });

// 2. Draw the ring (animate strokeDashoffset)
    tl.to("#gsap-ring", {
      strokeDashoffset: 0,
      duration: 1.5,
      ease: "power2.inOut"
    }, "-=0.4"); // Start slightly before rectangles finish

// 3. Pop the central dot
    tl.to("#gsap-dot", {
      r: 10,
      duration: 0.8,
      ease: "elastic.out(1, 0.3)"
    });

// 4. Color shift at the end
    tl.to("#gsap-ring", {
        stroke: "gold",
        duration: 0.5
    });
  }

// Check for GSAP readiness
  if (typeof gsap !== 'undefined') {
      runGsapSequence();
  } else {
      window.addEventListener('load', runGsapSequence);
  }

// Restart on click
  document.getElementById('gsap-svg').addEventListener('click', () => {
    gsap.set(".gsap-shape", { opacity: 0, y: 0 });
    gsap.set("#gsap-ring", { strokeDashoffset: 188.5, stroke: "tomato" });
    gsap.set("#gsap-dot", { r: 0 });
    runGsapSequence();
  });
</script>