CODEWITHSUNDEEP
javascriptjquerysvgsvg-animatevivus
Smithy
Smithy

Reputation: 847

Animate line in desired direction with Vivus.js

I'm trying to animate this line so it would start from top to bottom, and then turn right to draw itself, with Vivus.js. However, the graphic does not seem to animate and I can't figure out why..anyone has some experience with SVG draw animations perhaps? Here's the pen: https://codepen.io/anon/pen/mLzYyE

Code:

var animate = ["animate1"];

animate.forEach(function (svgId) {
    return new Vivus(svgId, {
        type: "async",
        start: "autostart",
        duration: 100
    });
});

Upvotes: 1

Views: 525

Answers (1)

t1m0n
t1m0n

Reputation: 3431

As I understand Vivus.js works only with path element. So in your case you should replace rect elements to path. I also changed type to oneByOne for sequenced animation. Here is a simplified example:

var animate = ["animate1"];

animate.forEach(function (svgId) {
    return new Vivus(svgId, {
        type: 'oneByOne',
        start: "autostart",
        duration: 100
    });
});
svg {
  height: 500px;
  width: 200px;
}

path {
  stroke-width: 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.3/vivus.min.js"></script>

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="animate1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 66.598 221.333" enable-background="new 0 0 66.598 221.333" xml:space="preserve">
	<path stroke="red" d="M0 0 l 0 20"/>
  <path stroke="red" d="M0 25 l 0 20"/>
  <path stroke="red" d="M0 50 l 0 20"/>
  <path stroke="red" d="M0 75 l 30 0"/>

</svg>

Upvotes: 1

Related Questions