Lazy Line Painter
lazylinepainter.info
A Modern JS library for SVG path animation
Getting Started | Documentation | Examples | Lazy Line Composer
Getting Started
However if a GUI is more your thing, be sure to use the Lazy Line Composer.
A free Online Editor developed specifically for SVG path animation.
NPM
npm i lazy-line-painterCDN
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/lazy-line-painter-1.9.4.min.js"></script>DOWNLOAD
<script src="./libs/lazylinepainter-1.9.4.js"></script>Quick Start
The most basic, no-frills implementation;
// import LazyLinePainter
import LazyLinePainter from 'lazy-line-painter'
// select your svg
let el = document.querySelector('#my-svg')
// initialise & configure LazyLinePainter
let myAnimation = new LazyLinePainter(el, { strokeWidth : 10 })
// paint! :)
myAnimation.paint()Documentation
Configuration
Configure on initialisation
On initialise you can pass lazylinepainter a config object as an argument containing the attritubes you wish to alter across the entire svg.
All config properties are optional.
Style attributes set in the config will override css styles.
let config = {
// style properties
'strokeWidth' // Adjust width of stroke
'strokeColor' // Adjust stroke color
'strokeCap' // Adjust stroke cap - butt | round | square
'strokeJoin' // Adjust stroke join - miter | round | bevel
'strokeOpacity' // Adjust stroke opacity 0 - 1
'strokeDash' // Adjust stroke dash - '5, 5'
// animation properties
'delay' // Delay before animation starts
'reverse' // reverse playback
'ease' // penner easing - easeExpoOut / easeExpoInOut / easeExpoIn etc
'repeat' // number of additional plays, -1 for loop
}
let svg = document.querySelector('#my-svg')
let myAnimation = new LazyLinePainter(svg, config)Configure individual paths
Data attributes can be used to configure style & animation properties on individual paths in the SVG.
Data attributes will override both css styles & initialisation config style attributes.
<path
// style attribues
data-llp-stroke-width
data-llp-stroke-color
data-llp-stroke-opacity
data-llp-stroke-cap
data-llp-stroke-join
data-llp-stroke-dash
// animation attribues
data-llp-duration (ms)
data-llp-delay (ms) // delay offset from start of timeline
data-llp-reverse (default = false)
data-llp-ease (default = 'easeLinear')
/>API Reference
Methods
Paint - accepts optional playback arguments - reverse, ease, delay
myAnimation.paint( {
reverse : true,
ease : 'easeExpoOut'
});Erase - paint can still be called on the element after it has been erased;
myAnimation.erase();Pause
myAnimation.pause();Resume
myAnimation.resume();Set - set options after initialisation
// progress - sets path position, second param accepts a number between 0 - 1
myAnimation.set('progress', value);Get - returns all lazylinepainter data;
myAnimation.get();Destroy - destroys svg & lazyline instance
myAnimation.destroy();Events
Handle events across entire animation
myAnimation.on('start', () => {});
myAnimation.on('update', () => {});
myAnimation.on('complete', () => {});Handle all events
Called for each shape animated within the svg.
event argument contains shape properties.
myAnimation.on('start:all', (event) => {});
myAnimation.on('update:all', (event) => { console.log(event.progress); // [0-1] });
myAnimation.on('complete:all', (event) => {});Handle targeted events.
Listen to events on specific shapes by adding the shape-id after the colon.
event argument contains shape properties.
myAnimation.on('start:id', (event) => {});
myAnimation.on('update:id', (event) => {});
myAnimation.on('complete:id', (event) => {});Timeline playback events
myAnimation.on('pause', () => {});
myAnimation.on('resume', () => {});
myAnimation.on('erase', () => {});Examples
Changelog
Refer to Release notes for entire Changelog
Author
Cam O'Connell @ http://merriment.info/
Email - [email protected]