Animate SVG strokes with GSAP

Add this code to your </body> tag on your Webflow page.

Add the attribute data-animate=svg to the SVG element

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>

<script>
$(document).ready(function() {
  $('[data-animate="svg"]').css({
    opacity: 1 
  }).find('path').each(function() {
    var pathLength = this.getTotalLength();
    $(this).css({
      "stroke-dasharray": pathLength,
      "stroke-dashoffset": pathLength
    });

    gsap.to(this, {
      duration: 5, 
      strokeDashoffset: 0,
      ease: "power2.out",
    });
  });
});
</script>