Hi,
I have been trying to use DrawSVGPlugin on our site but it is not working. I am trying to animate a simple SVG for testing.
I am not sure why DrawSVGPlugin is the only script that does not work.
<svg id="demo" xmlns="http://www.w3.org/2000/svg" width="5000" height="2000" viewBox="0 0 500 200">
<title>Untitled-1</title>
<rect width="500" height="200" fill="#29abe2"/>
<path d="M51,88c41.25-35.3,99.44-74.35,148-57,31.92,11.41,37.73,39.34,70,53,28.68,12.14,77.52,12.7,164-49" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="4" fill-rule="evenodd"/>
<path d="M302.31,164.42a86.72,86.72,0,0,1-34.09-6.58C252,151,242.37,140.67,233,130.68c-9.69-10.35-18.85-20.13-34.69-25.8-37.38-13.36-86.51,5.7-146,56.64l-2.6-3c60.69-51.94,111.15-71.24,150-57.36,16.76,6,26.68,16.58,36.27,26.82,9.07,9.69,18.44,19.7,33.84,26.22,39,16.51,93.54.1,162.06-48.79l2.32,3.26c-39.27,28-74.39,45.68-104.39,52.51A123.49,123.49,0,0,1,302.31,164.42Z" fill="#f2f2f2"/>
</svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="{OUR_SITE}/js/DrawSVGPlugin.js"></script>
const tl = new TimelineMax();
tl.from("path", 2, {
drawSVG: 0,
yoyo: true,
repeat: -1,
repeatDelay: 1,
ease: Power2.easeInOut
});
Thanks!