SVG Line Drawing Animation trouble

Animation
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

http://www.hypedocks.com/svg-drawing-animation/

hex-animate_1.hype.zip (18.9 KB)

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

2

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

1 Like
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="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/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">
	.st0{fill:none;stroke:#C2FFA6;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<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 "/>
</svg>

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

hex-animate_2.hype.zip (13.1 KB)

2 Likes