[Trouble with DrawSVG not working.]

Ahh gotcha.

 

Thanks!!

[Trouble with DrawSVG not working.]

HAHA got it to work. I wasn't loading any GSAP at all! I was only loading TweenMax and DrawSVGPlugin scripts. I replaced TweenMax cdn with GSAP script from our server.

 

Thanks!

[Trouble with DrawSVG not working.]

Hi,

 

There are no console errors. Scripts are being loaded. It's really weird how its only DrawSVGPlugin script that doesn't work. I have also tried copying & pasting examples but that also doesn't work.

 

Are there required scripts for DrawSVGPlugin to work?

 

Here are the list of scripts that are being loaded. In this order

 

<script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/libgif@0.0.2/libgif.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.min.js"></script>
<script src="{OUR_SITE}/js/DrawSVGPlugin.js"></script>
<script>
  const tl = new TimelineMax();
    tl.from("path", 2, {
        drawSVG: 0,
        yoyo: true,
        repeat: -1,
        repeatDelay: 1,
        ease: Power2.easeInOut
    });
  </script>

 

[Trouble with DrawSVG not working.]

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!

[post staggerTo letter spacing from center]

For some reason my letter spacing is starting from the left and not keeping the h1 centered. I am not sure whats causing it