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.
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 Descriptionduration
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.
reverse
Boolean false
Direction that the line will be drawn. callback
Function function() {}
A function to call once the animation has been completed.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4