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.
- Weighs less than 2KB minified and 800 bytes gzipped.
- Easy to use.
- Easing and stagger support.
- Free!
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 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.
| 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. |