FEATURES
This plugin uses the jQuery built-in animation engine to transition the stroke on every <path> inside the selected <svg> element, using stroke-dasharray and stroke-dashoffset properties.
-
Weights less than 2KB minified and 800 bytes gzipped.
-
Easy to use.
-
Easing and stagger support.
-
Free!
USAGE
-
Include jQuery DrawSVG after jQuery
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.drawsvg.js"></script> -
Initialize the plugin on the <svg> element you want to animate and store in a variable
var mySVG = $('#my_svg_element').drawsvg(); -
Run the animation
mySVG.drawsvg('animate');
Look at the demos for more advanced usages.
OPTIONS
| Option | Type | Default | Description |
|---|---|---|---|
duration |
Integer | 1000 |
The time to complete the animation of each path. |
stagger |
Integer | 200 |
Delay to start animating each individual path. |
easing |
String | swing |
Which easing function each path will use to transition. Use jQuery Easing Plugin for different easing functions. |
reverse |
Boolean | false |
Direction that the line will be drawn. |
callback |
Function | function() {} |
A function to call once the animation has been completed. |
DEMOS
Simple usage
See the Pen zvGXbr by Leonardo Santos (@lcdsantos) on CodePen.
Draw on scroll
See the Pen zvGQYB by Leonardo Santos (@lcdsantos) on CodePen.
Callback example
See the Pen vNNXrm by Leonardo Santos (@lcdsantos) on CodePen.
Animate mask path
See the Pen xwwEJw by Leonardo Santos (@lcdsantos) on CodePen.