ConnorAtherton / walkway

An easy way to animate SVG elements.
http://connoratherton.com/walkway
MIT License
4.37k stars 229 forks source link

Illustrator SVG > Polyline > Wont animate #31

Closed dennisjerdz closed 8 years ago

dennisjerdz commented 8 years ago

Hello, sorry for the disturbance, but despite a lot of attempts from me in both editing the html and the svg itself, I can't seem to make the animation to work. It just appears instantly.

Here is my code:

For SVG:

<svg version="1.1" id="logo" class="polyion" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
     x="0px" y="0px" width="600px" height="400px" viewBox="0 0 600 400" style="enable-background:new 0 0 600 400;"
     xml:space="preserve">
     <style>
     #logo>polyline
     {
        fill:white;
        stroke:black;
     }
     </style>
<polyline stroke-width="3" stroke="#ff0000" class="st0" points="108.9,14.1 305.8,87.7 256.3,198.7 136.1,48.2 "/>
<polyline stroke-width="3" stroke="#ff0000" class="st0" points="113.7,385.3 128.1,317.6 158.6,358.5 118.9,382.2 "/>
<polyline stroke-width="3" stroke="#ff0000" class="st0" points="128.1,317.6 208,385.9 223.7,307.1 136.1,316.7 "/>
<polyline stroke-width="3" stroke="#ff0000" class="st0" points="208,385.9 305.8,87.7 385.6,253 217.9,378.5 "/>
<polyline stroke-width="3" stroke="#ff0000" class="st0" points="358.5,160.8 385.6,253 421.1,127.3 366.3,156.6 "/>
<polyline stroke-width="3" stroke="#ff0000" class="st0" points="421.1,127.3 416,185.9 502.8,157.1 425.1,128.8 "/>
</svg>

For JS:

<script src="http://cdn.jsdelivr.net/walkway/0.0.1/walkway.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var svg = new Walkway({ 
      selector: '#logo',
      duration: '4000',
    });

    svg.draw();
});
</script>
ConnorAtherton commented 8 years ago

Hey @dennisjerdz, could you paste a codepen example with this code so I can see it running? Thanks.

dennisjerdz commented 8 years ago

Here it is, thank you sir! http://codepen.io/anon/pen/yeVWGm

wjramos commented 8 years ago

@dennisjerdz -- You aren't importing Walkway in that pen (evident from the browser console, stating Walkway is undefined), well it looks like you were trying to – but your script include was after the closing </body> tag which is invalid

See my fork that includes the library: http://codepen.io/wjramos/pen/eZrLOj

ConnorAtherton commented 8 years ago

Thanks @wjramos ⭐

dennisjerdz commented 8 years ago

I apologize for mistakes in my code. Most of my scripts were always after the body tag. Thank you for both of your help!