jQuery Plugins › jQuery Animation Plugins › jQuery Lazy Line Painter

SVG Path Animation Plugin with jQuery - Lazy Line Painter

File Size:	173 KB
Views Total:
Last Update:	01/31/2019 07:44:00 UTC
Publish Date:	02/01/2013 02:17:34 UTC
Official Website:	Go to website
License:	MIT

Demo Download

How to start using jQuery?

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', () => {});