SVG Animation

Example one:

<svg width="100" height="100" id="example1">
  <path d=" M 10 25
            L 10 75
            L 60 75
            L 10 25"
            stroke="red" stroke-width="2" fill="none" />
</svg>

Output:

Lets animate it:

Normal:

var example_one = new SvgAnimation({ "elem" : "#example1", "increaseBy" : 1, "timeout" : 10 });
example_one.animate();

Reverse:

var example_one = new SvgAnimation({ "elem" : "#example1", "increaseBy" : 1, "timeout" : 10, "reverse": true  });
example_one.animate();

Example two:

Multiple path in this SVG

Source code:

var example_two = new SvgAnimation({ "elem" : "#example2", "increaseBy" : 3, "timeout" : 10 });
example_two.animate();

Complex output:

increaseBy: timeout: reverse:

Source:

var svgAnimSettings = {
	"elem" : "#svg-circle",
	"increaseBy" : 3,
	"timeout" : 1,
	"reverse" : true
};

var svgCircle = new SvgAnimation(svgAnimSettings);

svgCircle.animate(function(response){
	console.log(response);
});