lcdsantos / Jquery Drawsvg
Licence: mit
Lightweight, simple to use jQuery plugin to animate SVG paths
Stars: ✭ 759
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Jquery Drawsvg
Jquery.sumoselect
A jQuery Single/Multi Select plugin which can be used on almost any device
Stars: ✭ 527 (-30.57%)
Mutual labels: jquery-plugin, jquery
Paroller.js
Parallax scrolling jQuery plugin
Stars: ✭ 535 (-29.51%)
Mutual labels: jquery-plugin, jquery
Jquery Store Locator Plugin
A store locator plugin using Google Maps API version 3
Stars: ✭ 471 (-37.94%)
Mutual labels: jquery-plugin, jquery
Jquery Selectric
jQuery plugin for easy manipulation and customization of HTML selects
Stars: ✭ 724 (-4.61%)
Mutual labels: jquery-plugin, jquery
Jquery Cropper
A jQuery plugin wrapper for Cropper.js.
Stars: ✭ 516 (-32.02%)
Mutual labels: jquery-plugin, jquery
Stupid Table Plugin
A stupidly small and simple jQuery table sorter plugin
Stars: ✭ 704 (-7.25%)
Mutual labels: jquery-plugin, jquery
Bigslide.js
⚠️**DEPRECATED**⚠️ A tiny slide panel navigation jQuery plugin with big dreams
Stars: ✭ 415 (-45.32%)
Mutual labels: jquery-plugin, jquery
Jquery Smartwizard
The awesome jQuery step wizard plugin
Stars: ✭ 635 (-16.34%)
Mutual labels: jquery-plugin, jquery
Form2js
Javascript library for collecting form data
Stars: ✭ 630 (-17%)
Mutual labels: jquery-plugin, jquery
Peity
Progressive <svg> pie, donut, bar and line charts
Stars: ✭ 4,214 (+455.2%)
Mutual labels: jquery-plugin, jquery
Rowgrid.js
A small, lightweight JavaScript plugin for placing items in straight rows (jQuery and vanilla JS version) – Demo:
Stars: ✭ 670 (-11.73%)
Mutual labels: jquery-plugin, jquery
Animatescroll.js
A Simple jQuery Plugin for Animating Scroll
Stars: ✭ 708 (-6.72%)
Mutual labels: jquery-plugin, jquery
Bootstrap Fileinput
An enhanced HTML 5 file input for Bootstrap 5.x/4.x./3.x with file preview, multiple selection, and more features.
Stars: ✭ 5,097 (+571.54%)
Mutual labels: jquery-plugin, jquery
Hc Sticky
JavaScript library that makes any element on your page visible while you scroll.
Stars: ✭ 375 (-50.59%)
Mutual labels: jquery-plugin, jquery
Jquery.flowchart
JQuery plugin that allows you to draw a flow chart.
Stars: ✭ 413 (-45.59%)
Mutual labels: svg, jquery
Jcanvas
A jQuery plugin that makes the HTML5 canvas easy to work with.
Stars: ✭ 612 (-19.37%)
Mutual labels: jquery-plugin, jquery
Isinviewport
An ultra-light jQuery plugin that tells you if an element is in the viewport but with a twist.
Stars: ✭ 646 (-14.89%)
Mutual labels: jquery-plugin, jquery
jQuery DrawSVG
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!
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 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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].