{"id":13630993,"url":"https://github.com/merri-ment/lazy-line-painter","last_synced_at":"2025-05-14T19:04:32.277Z","repository":{"id":6465392,"uuid":"7705216","full_name":"merri-ment/lazy-line-painter","owner":"merri-ment","description":"Lazy Line Painter - A Modern JS library for SVG path animation","archived":false,"fork":false,"pushed_at":"2023-12-12T05:15:03.000Z","size":1304,"stargazers_count":1977,"open_issues_count":16,"forks_count":325,"subscribers_count":71,"default_branch":"master","last_synced_at":"2025-04-13T13:58:04.196Z","etag":null,"topics":["animation","animation-library","drawing","javascript","js","lightweight","path-animation","responsive","svg"],"latest_commit_sha":null,"homepage":"https://lazylinepainter.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/merri-ment.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2013-01-19T16:06:07.000Z","updated_at":"2025-04-01T09:18:12.000Z","dependencies_parsed_at":"2023-12-12T02:23:48.938Z","dependency_job_id":"d02a13d6-dff4-471c-a900-b3f52985f890","html_url":"https://github.com/merri-ment/lazy-line-painter","commit_stats":{"total_commits":205,"total_committers":9,"mean_commits":22.77777777777778,"dds":0.4390243902439024,"last_synced_commit":"e50ac819e81fdae6e39417709b7eafa23ba0a596"},"previous_names":["camoconnell/lazy-line-painter"],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/merri-ment%2Flazy-line-painter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/merri-ment%2Flazy-line-painter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/merri-ment%2Flazy-line-painter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/merri-ment%2Flazy-line-painter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/merri-ment","download_url":"https://codeload.github.com/merri-ment/lazy-line-painter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248724585,"owners_count":21151559,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","animation-library","drawing","javascript","js","lightweight","path-animation","responsive","svg"],"created_at":"2024-08-01T22:02:06.206Z","updated_at":"2025-04-13T13:58:09.120Z","avatar_url":"https://github.com/merri-ment.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"![Lazy Line Painter](https://lazylinepainter.com/banner.png)\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg alt=\"Bundle Size\" src=\"https://img.shields.io/bundlephobia/min/lazy-line-painter.svg?colorB=6f6f6f\u0026style=flat-square\"\u003e\n\t\u003cimg alt=\"GitHub Release\" src=\"https://img.shields.io/github/release/merri-ment/lazy-line-painter.svg?colorB=6f6f6f\u0026style=flat-square\"\u003e\n\t\u003cimg alt=\"License\" src=\"https://img.shields.io/github/license/merri-ment/lazy-line-painter.svg?colorB=6f6f6f\u0026style=flat-square\"\u003e\n\t\u003cimg alt=\"npm Version\" src=\"https://data.jsdelivr.com/v1/package/npm/lazy-line-painter/badge\"\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003e\nLazy Line Painter\n\u003c/h1\u003e\n\u003ch3 align=\"center\"\u003e\n\t\u003ca href=\"https://lazylinepainter.com\" target=\"_blank\"\u003elazylinepainter.com\u003c/a\u003e\n\u003c/h3\u003e\n\u003cp align=\"center\"\u003e\nA Modern JS library for SVG path animation\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#getting-started\"\u003eGetting Started\u003c/a\u003e\u0026nbsp;|\u0026nbsp;\u003ca href=\"#documentation\"\u003eDocumentation\u003c/a\u003e\u0026nbsp;|\u0026nbsp;\u003ca href=\"#examples\"\u003eExamples\u003c/a\u003e\u0026nbsp;|\u0026nbsp;\u003ca href=\"https://lazylinepainter.com/#composer\"\u003eLazy Line Composer\u003c/a\u003e\n\u003c/p\u003e\n \n\u003cbr\u003e\u003cbr\u003e\n\n# Getting Started\n\n![Lazy Line Painter](https://lazylinepainter.com/drag_drop.jpg)\n_Lazy Line Painter can be setup with minimal effort as per the Quick Start instructions. \u003cbr\u003e\u003cbr\u003e\nHowever if a GUI is more your thing, be sure to use the [Lazy Line Composer](https://lazylinepainter.com/#composer). \u003cbr\u003e\nA free Online Editor developed specifically for SVG path animation._\n\n\u003cbr\u003e\n\n##### [NPM](https://www.npmjs.com/package/lazy-line-painter) \u003cbr\u003e\n\n```js\npnpm i lazy-line-painter\n```\n\n##### [CDN](https://www.jsdelivr.com/package/npm/lazy-line-painter) \u003cbr\u003e\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/lazy-line-painter@2.0.3/lib/lazy-line-painter-2.0.3.min.js\"\u003e\u003c/script\u003e\n```\n\n##### [DOWNLOAD](https://github.com/merri-ment/lazy-line-painter/releases) \u003cbr\u003e\n\n```html\n\u003cscript src=\"./libs/lazylinepainter-2.0.3.js\"\u003e\u003c/script\u003e\n```\n\n\u003cbr\u003e\u003cbr\u003e\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 \u0026 configure LazyLinePainter\nconst myAnimation = new LazyLinePainter(el, { strokeWidth: 10 });\n\n// paint! :)\nmyAnimation.paint();\n```\n\n\u003cbr\u003e\u003cbr\u003e\n\n# Documentation\n\n\u003cbr\u003e\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. \u003cbr\u003e\nAll config properties are optional. \u003cbr\u003e\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\u003cbr\u003e\n\n##### Configure individual paths\n\nData attributes can be used to configure style \u0026 animation properties on individual paths in the SVG. \u003cbr\u003e\nData attributes will override both css styles \u0026 initialisation config style attributes. \u003cbr\u003e\n\n\u003c!-- prettier-ignore-start --\u003e\n```html\n\u003cpath \n\n  // style \n  data-llp-stroke-width=\"10\"\n  data-llp-stroke-color=\"#000000\"\n  data-llp-stroke-opacity=\"0.5\" \n  data-llp-stroke-cap=\"rounded\" \n  data-llp-stroke-join=\"mitre\" \n\n  // animation\n  data-llp-stroke-dash=\"[2,2]\" \n  data-llp-duration=\"200\" // (ms)\n  data-llp-delay=\"200\" // delay offset from start of timeline (ms)\n  data-llp-reverse=\"true\" (default = \"false\") \n  data-llp-ease=\"easeInOutQuad\" (default = 'easeLinear') \n\n  /\u003e\n```\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003cbr\u003e\u003cbr\u003e\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 \u0026 lazyline instance\n\n```js\nmyAnimation.destroy();\n```\n\n\u003cbr\u003e\u003cbr\u003e\n\n#### Events\n\n##### Handle events across entire animation\n\n```js\nmyAnimation.on(\"start\", () =\u003e {});\nmyAnimation.on(\"update\", () =\u003e {});\nmyAnimation.on(\"complete\", () =\u003e {});\n```\n\n##### Handle all events\n\nCalled for each shape animated within the svg.\u003cbr\u003e\nevent argument contains shape properties.\n\n```js\nmyAnimation.on('start:all', (event) =\u003e {});\nmyAnimation.on('update:all', (event) =\u003e { console.log(event.progress); // [0-1] });\nmyAnimation.on('complete:all', (event) =\u003e {});\n```\n\n##### Handle targeted events.\n\nListen to events on specific shapes by adding the shape-id after the colon.\u003cbr\u003e\nevent argument contains shape properties.\n\n```js\nmyAnimation.on(\"start:id\", (event) =\u003e {});\nmyAnimation.on(\"update:id\", (event) =\u003e {});\nmyAnimation.on(\"complete:id\", (event) =\u003e {});\n```\n\n##### Timeline playback events\n\n```js\nmyAnimation.on(\"pause\", () =\u003e {});\nmyAnimation.on(\"resume\", () =\u003e {});\nmyAnimation.on(\"erase\", () =\u003e {});\n```\n\n\u003cbr\u003e\u003cbr\u003e\n\n# [Examples](https://codepen.io/collection/DLLeRb/)\n\n- [Hello World Example](https://codepen.io/camoconnell/pen/zeqgWB)\n- [Event Example](https://codepen.io/camoconnell/pen/vvKWzP)\n- [Set Example](https://codepen.io/camoconnell/pen/GPYGvd)\n- [Playback Options](https://codepen.io/camoconnell/pen/wRYELj)\n\n\u003cbr\u003e\u003cbr\u003e\n\n## Changelog\n\n_Refer to [Release notes](https://github.com/merri-ment/lazy-line-painter/releases) for entire Changelog_\n\n\u003cbr\u003e\u003cbr\u003e\n\n## Author\n\n[https://merriment.info/](https://merriment.info/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmerri-ment%2Flazy-line-painter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmerri-ment%2Flazy-line-painter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmerri-ment%2Flazy-line-painter/lists"}