\n\n# Getting Started\n\n\n_Lazy Line Painter can be setup with minimal effort as per the Quick Start instructions.
\nHowever if a GUI is more your thing, be sure to use the [Lazy Line Composer](https://lazylinepainter.com/#composer). \nA free Online Editor developed specifically for SVG path animation._\n\n \n\n##### [NPM](https://www.npmjs.com/package/lazy-line-painter) \n\n```js\npnpm i lazy-line-painter\n```\n\n##### [CDN](https://www.jsdelivr.com/package/npm/lazy-line-painter) \n\n```html\n\n```\n\n##### [DOWNLOAD](https://github.com/merri-ment/lazy-line-painter/releases) \n\n```html\n\n```\n\n
\n\n### Quick Start\n\nThe most basic, no-frills implementation;\n\n```js\n// import LazyLinePainter\nimport LazyLinePainter from \"lazy-line-painter\";\n\n// select your svg\nconst el = document.querySelector(\"#my-svg\");\n\n// initialise & configure LazyLinePainter\nconst myAnimation = new LazyLinePainter(el, { strokeWidth: 10 });\n\n// paint! :)\nmyAnimation.paint();\n```\n\n
\n\n# Documentation\n\n \n\n### Configuration\n\n##### Configure on initialisation\n\nOn initialise you can pass lazylinepainter a config object as an argument containing the attritubes you wish to alter across the entire svg. \nAll config properties are optional. \nStyle attributes set in the config will override css styles.\n\n```js\n\nconst config = {\n\n\t// style properties\n\t'strokeWidth' // Adjust width of stroke\n\t'strokeColor' // Adjust stroke color\n\t'strokeCap' // Adjust stroke cap - butt | round | square\n\t'strokeJoin' // Adjust stroke join - miter | round | bevel\n\t'strokeOpacity' // Adjust stroke opacity 0 - 1\n\t'strokeDash' // Adjust stroke dash - '5, 5'\n\n\t// animation properties\n\t'delay' // Delay before animation starts\n\t'reverse' // reverse playback\n\t'ease' // penner easing - easeExpoOut / easeExpoInOut / easeExpoIn etc\n\t'repeat' // number of additional plays, -1 for loop\n}\n\nconst svg = document.querySelector('#my-svg')\nconst myAnimation = new LazyLinePainter(svg, config)\n\n```\n\n \n\n##### Configure individual paths\n\nData attributes can be used to configure style & animation properties on individual paths in the SVG. \nData attributes will override both css styles & initialisation config style attributes. \n\n\n```html\n\n```\n\n\n
\n\n### API Reference\n\n#### Methods\n\n**Paint** - accepts optional playback arguments - reverse, ease, delay\n\n```js\nconst reverse = true;\nconst ease = \"easeExpoOut\";\nconst delay = 200;\nmyAnimation.paint({ reverse, ease, delay });\n```\n\n**Erase** - paint can still be called on the element after it has been erased;\n\n```js\nmyAnimation.erase();\n```\n\n**Pause**\n\n```js\nmyAnimation.pause();\n```\n\n**Resume**\n\n```js\nmyAnimation.resume();\n```\n\n**Progress**\n\n```js\n// set - [0 - 1]\nmyAnimation.progress(value);\n\n// get\nconst progress = myAnimation.progress();\nconsole.log(progress);\n```\n\n**Destroy** - destroys svg & lazyline instance\n\n```js\nmyAnimation.destroy();\n```\n\n
\n\n#### Events\n\n##### Handle events across entire animation\n\n```js\nmyAnimation.on(\"start\", () => {});\nmyAnimation.on(\"update\", () => {});\nmyAnimation.on(\"complete\", () => {});\n```\n\n##### Handle all events\n\nCalled for each shape animated within the svg. \nevent argument contains shape properties.\n\n```js\nmyAnimation.on('start:all', (event) => {});\nmyAnimation.on('update:all', (event) => { console.log(event.progress); // [0-1] });\nmyAnimation.on('complete:all', (event) => {});\n```\n\n##### Handle targeted events.\n\nListen to events on specific shapes by adding the shape-id after the colon. \nevent argument contains shape properties.\n\n```js\nmyAnimation.on(\"start:id\", (event) => {});\nmyAnimation.on(\"update:id\", (event) => {});\nmyAnimation.on(\"complete:id\", (event) => {});\n```\n\n##### Timeline playback events\n\n```js\nmyAnimation.on(\"pause\", () => {});\nmyAnimation.on(\"resume\", () => {});\nmyAnimation.on(\"erase\", () => {});\n```\n\n
![\"Bundle](\"https://img.shields.io/bundlephobia/min/lazy-line-painter.svg?colorB=6f6f6f&style=flat-square\")
\n\t![\"GitHub](\"https://img.shields.io/github/release/merri-ment/lazy-line-painter.svg?colorB=6f6f6f&style=flat-square\")
\n\t![\"License\"](\"https://img.shields.io/github/license/merri-ment/lazy-line-painter.svg?colorB=6f6f6f&style=flat-square\")
\n\t