Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: about 1 month 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 (over 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 (about 2 months 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/)