SVG Line Drawing Animation trouble


(n.gove) #1

I am trying to use the Vivus library to animate a simple hexagon shape with two separate paths with no avail. I have been using the HYPE documentation found here (18.9 KB)

Any ideas on how to make this work would be much appreciated. Thank you

(drewbullen) #2

Make sure your SVG has an ID that corresponds with your call to the Vivus.js library.

(Freelancer) #3

@n.gove in the SVG you must set one ID for each file, in your SVG you have 3id ( Layer_1 + x3C_polygon_x3E__5 + x3C_polygon_x3E__1 )

<svg version="1.1" id="Layer_1" xmlns="" xmlns:xlink="" x="0px" y="0px"
	 viewBox="0 0 1366 768" style="enable-background:new 0 0 1366 768;" xml:space="preserve">
<style type="text/css">
<path id="_x3C_polygon_x3E__5_" class="st0" d="M528.2,474.4 683.9,563.2 838.6,472.9 837.8,293.6 "/>
<path id="_x3C_polygon_x3E__1_" class="st0" d="M837.8,293.6 682.1,204.8 527.4,295.1 528.2,474.4 "/>

you should re-export the SVG with a single element.
In any case, with a logo made with simple lines you can avoid extra code. Here and example using timeline only (13.1 KB)