SVG Path Animation Plugin with JavaScript - Lazy Line Painter

Lazy Line Painter is a JavaScript library for creating responsive and mobile-compatible SVG Path Animations with no dependencies. Each paths duration can be tweaked in the code.

How to use it:

1. Create your Line art in Illustrator, and then export as an .SVG file.

2. Install and import the Lazy Line Painter.

# NPM
$ npm install lazy-line-painter

<script src="/libs/lazylinepainter.js"></script>

3. Call the function LazyLinePainter on your SVG element.

<svg
  id="example"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 352 230"
  data-llp-composed="true"
>
  ...
</svg>

(function () {
  document.onreadystatechange = () => {
    if (document.readyState === "complete") {
      const svg = document.querySelector("#example");
      const config = { 
        // options here
      };
      console.log(svg);
      const animation = new LazyLinePainter(svg, config);
      animation.paint();
    }
  };
})();

4. Available settings to customize the SVG path animation.

const config = { 

  // customize the stroke
  'strokeWidth': 2,
  'strokeDash': null, // e.g. '5, 5'
  'strokeColor': '#000',
  'strokeOverColor': null,
  'strokeCap': 'round', // butt  | round | square
  'strokeJoin': 'round', // miter | round | bevel
  'strokeOpacity': 1,

  // delay in ms
  'delay': 0,

  // easing effect
  'ease': null,

  // if you selector id doesn't match the key referencing your path data value within svgData.
  'overrideKey': null,

  // whether to draw each path sequentially
  'drawSequential': false,

  // speed multiplier
  'speedMultiplier': 1,

  // reverse the animation
  'reverse': false,

  // is paused
  'paused': false,

  // progress
  'progress': 0,

  // longest duration in ms
  'longestDuration': 0,

  // number of additional plays
  //  -1 for loop
  'repeat': 0,

  // offset
  offset: this.el.getBoundingClientRect()
  
};

5. You can also pass the options to each SVG path using the following HTML data attributes:

<path 
  data-llp-stroke-width="10"
  data-llp-stroke-color="#000000"
  data-llp-stroke-opacity="0.5" 
  data-llp-stroke-cap="rounded" 
  data-llp-stroke-join="mitre" 
  data-llp-stroke-dash="[2,2]" 
  data-llp-duration="200" 
  data-llp-delay="200"
  data-llp-reverse="true"
  data-llp-ease="easeInOutQuad"
/>

6. API methods.

// animates the path
animation.paint(reverse, ease, delay);

// clears the path
animation.erase();

// pauses the animation
animation.pause();

// resumes the animation 
animation.resume();

// sets progress [0 - 1]
animation.progress(value);

// gets progress
const progress = animation.progress();

// destroys the plugin
animation.destroy();

7. Event handlers.

animation.on('start', () => {});
animation.on('update', () => {});
animation.on('complete', () => {});
animation.on('start:all', (event) => {});
animation.on('update:all', (event) => { console.log(event.progress); // [0-1] });
animation.on('complete:all', (event) => {});
animation.on('start:id', (event) => {});
animation.on('update:id', (event) => {});
animation.on('complete:id', (event) => {});
animation.on('pause', () => {});
animation.on('resume', () => {});
animation.on('erase', () => {});

Changelog:

v2.0.3 (2023-12-12)

• Remove jQuery dependency

v1.9.6 (2019-01-31)

• Update

v1.9.4 (2019-01-22)

• Update

v1.9.3 (2019-01-11)

• Fixed: safari pathLength issue
• Added: Manage tabbing away

v1.9.2 (2019-01-07)

• Added pause, erase & resume timeline playback events

v1.9.1 (2018-12-18)

• set styles rather than attributes

v1.9.0 (2018-12-17)

• set styles rather than attributes

v1.8.0 (2018-11-19)

• JS & DOC update

v1.7.0 (2015-09-12)

• update.

---

This awesome jQuery plugin is developed by camoconnell. For more Advanced Usages, please check the demo page or visit the official website.