https://github.com/lcdsantos/jquery-drawsvg

Lightweight, simple to use jQuery plugin to animate SVG paths
https://github.com/lcdsantos/jquery-drawsvg

animation jquery jquery-plugin svg svg-animations

Last synced: 5 days ago
JSON representation

Lightweight, simple to use jQuery plugin to animate SVG paths

• Host: GitHub
• URL: https://github.com/lcdsantos/jquery-drawsvg
• Owner: lcdsantos
• License: mit
• Created: 2015-09-10T14:56:27.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2016-10-22T01:07:06.000Z (about 8 years ago)
• Last Synced: 2024-10-21T07:13:23.581Z (18 days ago)
• Topics: animation, jquery, jquery-plugin, svg, svg-animations
• Language: JavaScript
• Homepage: http://lcdsantos.github.io/jquery-drawsvg/
• Size: 61.5 KB
• Stars: 769
• Watchers: 41
• Forks: 139
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-web-effect - jquery-drawsvg - Lightweight, simple to use jQuery plugin to animate SVG paths (🚀 A series of exquisite and compact web page cool effects / SVG Animations)
• fucking-awesome-web-effect - jquery-drawsvg - Lightweight, simple to use jQuery plugin to animate SVG paths (🚀 A series of exquisite and compact web page cool effects / SVG Animations)

README

        
# jQuery DrawSVG

This plugin uses the jQuery built-in animation engine to transition the `stroke` on every `` inside the selected `` 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

```html

```

Initialize the plugin on the  element you want to animate and store in a variable

```js

var mySVG = $('#my_svg_element').drawsvg();

```

Run the animation

```js

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](http://gsgd.co.uk/sandbox/jquery/easing/) 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](http://codepen.io/lcdsantos/pen/zvGXbr/)

[Draw on scroll](http://codepen.io/lcdsantos/pen/zvGQYB/)

[Callback example](http://codepen.io/lcdsantos/pen/vNNXrm/)

[Animate mask path](http://codepen.io/lcdsantos/pen/xwwEJw/)