Skip to content
Branch: master
Go to file
Code

Latest commit

Cam O'Connell
Cam O'Connell committed 73e8dcb Jan 30, 2019

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
lib
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

Lazy Line Painter

undefined undefined undefined undefined

Lazy Line Painter

lazylinepainter.info

A Modern JS library for SVG path animation

Getting Started | Documentation | Examples | Lazy Line Composer



Getting Started

Lazy Line Painter Lazy Line Painter can be setup with minimal effort as per the Quick Start instructions.

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-painter
CDN
<script src="https://cdn.jsdelivr.net/npm/lazy-line-painter@1.9.4/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 - camoconnell@gmail.com

You can’t perform that action at this time.