diff --git a/README.md b/README.md index c836e2c..73719ae 100644 --- a/README.md +++ b/README.md @@ -33,17 +33,17 @@ A free Online Editor developed specifically for SVG path animation. ### Install -#### NPM
+##### NPM
```js npm i lazy-line-painter ``` -#### CDN
+##### CDN
```html ``` -#### [DOWNLOAD](https://github.com/camoconnell/lazy-line-painter/releases)
+##### [DOWNLOAD](https://github.com/camoconnell/lazy-line-painter/releases)
```html ``` @@ -75,7 +75,7 @@ myAnimation.paint() ### Configuration -#### Configure svg +##### Configure svg On initialise, pass lazylinepainter a config object as an argument containing the attritubes you wish to alter across the entire svg; ```js @@ -106,7 +106,7 @@ Style attributes set in the config will override css styles
-#### Configure specific paths +##### Configure specific 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.
@@ -134,7 +134,7 @@ Data attributes will override both css styles & initialisation config style attr #### Methods -**Paint**
+##### Paint accepts optional playback arguments - reverse, ease, delay ```js myAnimation.paint( { @@ -143,36 +143,36 @@ myAnimation.paint( { }); ``` -**Erase**
+##### Erase paint can still be called on the element after it has been erased; ```js myAnimation.erase(); ``` -**Pause** +##### Pause ```js myAnimation.pause(); ``` -**Resume** +##### Resume ```js myAnimation.resume(); ``` -**Set**
+##### Set set options after initialisation ```js // progress - sets path position, second param accepts a number between 0 - 1 myAnimation.set('progress', value); ``` -**Get**
+##### Get returns all lazylinepainter data; ```js myAnimation.get(); ``` -**Destroy**
+##### Destroy destroys svg & lazyline instance ```js myAnimation.destroy(); @@ -181,14 +181,14 @@ myAnimation.destroy(); #### Events -**Handle events across entire animation** +##### Handle events across entire animation ```js myAnimation.on('start', () => {}); myAnimation.on('update', () => {}); myAnimation.on('complete', () => {}); ``` -**Handle all events**
+##### Handle all events Called for each shape animated within the svg.
event argument contains shape properties. ```js @@ -197,7 +197,7 @@ myAnimation.on('update:all', (event) => { console.log(event.progress); // [0-1] myAnimation.on('complete:all', (event) => {}); ``` -**Handle targeted events.**
+##### Handle targeted events. Listen to events on specific shapes by adding the shape-id after the colon.
event argument contains shape properties. ```js @@ -206,7 +206,7 @@ myAnimation.on('update:id', (event) => {}); myAnimation.on('complete:id', (event) => {}); ``` -**Timeline playback events**
+##### Timeline playback events ```js myAnimation.on('pause', () => {}); myAnimation.on('resume', () => {});