SVG Path Animation Plugin with jQuery - Lazy Line Painter

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 , 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",
          "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",
          "path": "M313.5,137.138 c0,0-12.209-32.137-39.746-32.138C246.216,104.999,234,137.132,234,137.132",
          "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",
      "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

8. Callback functions.

let lazylinepainter = new LazyLinePainter({
    'onComplete': null,
    'onUpdate': null,
    'onStart': null,
    'onStrokeStart': null,
    'onStrokeComplete': null,

9. API methods.

// animates the path
// clears the path
// pauses the animation
// resumes the animation 
// sets path position
// gets data
// destroys the plugin


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.

  • Publication date: 19.11.2018
  • Source