SVG Path Animation Plugin with jQuery - Lazy Line Painter

File Size: | 173 KB |
---|---|
Views Total: | 7284 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Lazy Line Painter is a JavaScript library for creating responsive and mobile-compatible SVG Path Animations using the Raphaël Library, which uses the SVG W3C Recommendation and VML as a base for creating graphics. Each paths duration can be tweaked in the code.
How to use it:
1. Create your Line art in Illustrator, and then export as an .SVG file.
2. Convert your svg into a svgData object on http://lazylinepainter.info/ , and then copy the code.
3. Import jQuery library (optional), Raphaël Library, and Lazy Line Painter on your page
<script src="/path/to/jquery.min.js"></script> <script src="/path/to/raphael-min.js"></script> <script src="/path/to/jquery.lazy-line-painter.js"></script
4. Import the JS Code generated in the Step 2.
var svgData = { "demo" : { "strokepath" : [{ "path": "M7.603,5.5 c0,0,10.298,24.07,33.517,24.07c23.221,0,33.519-24.07,33.519-24.07s9.142,24.07,33.513,24.07c24.372,0,33.515-24.07,33.515-24.07 s10.858,24.07,33.518,24.07S208.703,5.5,208.703,5.5s9.717,24.07,33.521,24.07c23.801,0,33.518-24.07,33.518-24.07 s13.828,24.07,33.524,24.07c19.698,0,33.524-24.07,33.524-24.07", "duration":1500 },{ "path": "M120,139.129 c0,0-8.708-34.233-42.483-34.236c-28.724-0.001-42.493,34.23-42.493,34.23", "duration":300 },{ "path": "M313.5,137.138 c0,0-12.209-32.137-39.746-32.138C246.216,104.999,234,137.132,234,137.132", "duration":300 },{ "path": "M80.246,193.604 c0,0,21.399,74.387,93.074,74.387c76.026,0,93.095-74.387,93.095-74.387", "duration":500 }], "dimensions" : { "width": 349, "height":277 } } }
5. Create a container for the SVG path animation.
<div id='demo'></div>
6. Initialize the library to activate the SVG path animation.
let lazylinepainter = new LazyLinePainter({ 'id': 'demo', 'svgData' : svgData })
7. Available settings to customize the SVG path animation.
let lazylinepainter = new LazyLinePainter({ // customize the stroke 'strokeWidth': 2, 'strokeDash': null, // e.g. '5, 5' 'strokeColor': '#000', 'strokeOverColor': null, 'strokeCap': 'round', // butt | round | square 'strokeJoin': 'round', // miter | round | bevel 'strokeOpacity': 1, // delay in ms 'delay': 0, // easing effect 'ease': null, // if you selector id doesn't match the key referencing your path data value within svgData. 'overrideKey': null, // whether to draw each path sequentially 'drawSequential': true, // speed multiplier 'speedMultiplier': 1, // reverse the animation 'reverse': false, // is paused 'paused': false, // progress 'progress': 0, // longest duration in ms 'longestDuration': 0, // play head 'playhead': 0 // offset offset: this.el.getBoundingClientRect() })
8. API methods.
// animates the path lazylinepainter.paint(reverse, ease, delay); // clears the path lazylinepainter.erase(); // pauses the animation lazylinepainter.pause(); // resumes the animation lazylinepainter.resume(); // sets path position lazylinepainter.set(num); // gets data lazylinepainter.get(); // destroys the plugin lazylinepainter.destroy();
9. Event handlers.
lazylinepainter.on('start', () => {}); lazylinepainter.on('update', () => {}); lazylinepainter.on('complete', () => {}); lazylinepainter.on('start:all', (event) => {}); lazylinepainter.on('update:all', (event) => { console.log(event.progress); // [0-1] }); lazylinepainter.on('complete:all', (event) => {}); lazylinepainter.on('start:id', (event) => {}); lazylinepainter.on('update:id', (event) => {}); lazylinepainter.on('complete:id', (event) => {}); lazylinepainter.on('pause', () => {}); lazylinepainter.on('resume', () => {}); lazylinepainter.on('erase', () => {});
Changelog:
v1.9.6 (2019-01-31)
- Update
v1.9.4 (2019-01-22)
- Update
v1.9.3 (2019-01-11)
- Fixed: safari pathLength issue
- Added: Manage tabbing away
v1.9.2 (2019-01-07)
- Added pause, erase & resume timeline playback events
v1.9.1 (2018-12-18)
- set styles rather than attributes
v1.9.0 (2018-12-17)
- set styles rather than attributes
v1.8.0 (2018-11-19)
- JS & DOC update
v1.7.0 (2015-09-12)
- update.
This awesome jQuery plugin is developed by camoconnell. For more Advanced Usages, please check the demo page or visit the official website.