Jump to content
Search Community

Trouble with DrawSVG not working.

Designfleek test
Moderator Tag

Recommended Posts

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!

Link to comment
Share on other sites

Hey Designfleek.

 

Sorry to hear that's it's not working for you. There's nothing obviously wrong with the code that you provided. 

 

Can you please look in your developer tools console and see what errors are shown, if any? Most likely a resource is not loading correctly or you have the wrong load order.

 

It's hard for us to help without seeing the error. Maybe if you could host a copy online somewhere we'd be able to help more. 

Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...