SVG Path Animation Plugin with jQuery - Lazy Line Painter

Lazy Line Painter is a JavaScript library for creating responsive and mobile-compatible SVG Path Animations using the Raphaël Library, which uses the SVG W3C Recommendation and VML as a base for creating graphics.  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. Convert your svg into a svgData object on http://lazylinepainter.info/ , and then copy the code.

3. Import jQuery library (optional), Raphaël Library, and Lazy Line Painter on your page

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/raphael-min.js"></script> 
<script src="/path/to/jquery.lazy-line-painter.js"></script

4. Import the JS Code generated in the Step 2.

var svgData = { 
    "demo" :
    { 
      "strokepath" :
        [{   
          "path": "M7.603,5.5 c0,0,10.298,24.07,33.517,24.07c23.221,0,33.519-24.07,33.519-24.07s9.142,24.07,33.513,24.07c24.372,0,33.515-24.07,33.515-24.07 s10.858,24.07,33.518,24.07S208.703,5.5,208.703,5.5s9.717,24.07,33.521,24.07c23.801,0,33.518-24.07,33.518-24.07 s13.828,24.07,33.524,24.07c19.698,0,33.524-24.07,33.524-24.07",
          "duration":1500 
        },{   
          "path": "M120,139.129 c0,0-8.708-34.233-42.483-34.236c-28.724-0.001-42.493,34.23-42.493,34.23",
          "duration":300
        },{   
          "path": "M313.5,137.138 c0,0-12.209-32.137-39.746-32.138C246.216,104.999,234,137.132,234,137.132",
        "duration":300
        },{
          "path": "M80.246,193.604 c0,0,21.399,74.387,93.074,74.387c76.026,0,93.095-74.387,93.095-74.387",
          "duration":500
        }],  
      "dimensions" : { "width": 349, "height":277 }
    }
}

5. Create a container for the SVG path animation.

<div id='demo'></div>

6. Initialize the library to activate the SVG path animation.

let lazylinepainter = new LazyLinePainter({
    'id': 'demo',
    'svgData' : svgData
})

7. Available settings to customize the SVG path animation.

let lazylinepainter = new LazyLinePainter({

    // 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': true,

    // speed multiplier
    'speedMultiplier': 1,

    // reverse the animation
    'reverse': false,

    // is paused
    'paused': false,

    // progress
    'progress': 0,

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

    // play head
    'playhead': 0

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

8. API methods.

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

// clears the path
lazylinepainter.erase();

// pauses the animation
lazylinepainter.pause();

// resumes the animation 
lazylinepainter.resume();

// sets path position
lazylinepainter.set(num);

// gets data
lazylinepainter.get();

// destroys the plugin
lazylinepainter.destroy();

9. Event handlers.

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

Changelog:

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.