Lazy Line Painter – jQuery Path Animation

In this article, I’m going to share a wonderful resource “Lazy Line Painter – jQuery Path Animation”. We know very well, a site design is the most important part of any website. As a developer, it’s our duty to make each of our project awesome.

Normally, we are using images in our design in different areas such as icon images, banners and etc. But it’s not a good practice to build the best design. I’m suggesting you use the SVG instead of normal images. You can use SVG for your icons, small infographics and etc.

The question is why we use SVG?

SVG stands for Scalable Vector Graphics are an XML based markup that can contain two-dimensional vectors. SVG is much more powerful than other image formats we can use on the web as we can manipulate them with code.

Now, let start implementation of Lazy Line Painter – jQuery Path Animation to make our SVG Path more effective. In other words, add a new life to your SVG Path.

It’s a lightweight (8kb), mobile-friendly and responsive jQuery plugin.

Prerequisite, SVG data: Create a line art (path) in your vector editor. It maybe illustrator, coral or sketch.

• Ensure there are no fills.
• No closed paths. i.e – Line needs a start and an end.

Available options:

'strokeWidth'      // Adjust width of stroke
'strokeColor'      // Adjust stroke color
'strokeCap'        // Adjust stroke cap  - butt  | round | square
'strokeJoin'       // Adjust stroke join - miter | round | bevel
'strokeOpacity'    // Adjust stroke opacity 0 - 1
'strokeDash'       // Adjust stroke dash - '5, 5'

'onComplete'       // Callback fired after animation finishes
'onUpdate'	   // Callback fired on animation update
'onStart'          // Callback fired before animation starts
'onStrokeStart'	   // Callback fires after each stroke animation starts
'onStrokeComplete' // Callback fires after each stroke animation completes

'delay'            // Delay before animation starts
'overrideKey'      // Set this property if you selector id doesn't match the key referencing your path data value within svgData.
'speedMultiplier'  // slow down or speed up the animation
'drawSequential'   // true: draw each path sequentially, false, draw all at once
'reverse'          // reverse drawSequence
'ease'             // ease animation

You can follow the given code snippet to apply these options to your element.

$('#svgpath').lazylinepainter({
    'svgData' : svgData, // the object containing the SVG path info
    'strokeWidth':5,
    'strokeColor':'#de8f8f',
    'ease': 'easeInOutExpo'
});

Now, the main requirement is the svgData object. That object contains the svg path info.

var svgData = {
  // name of your lazy line
  'svgpath' : {
    // this contains all your SVG path info
    'paths' : [{
        'path': "M144.869,199c0....", // path string
        'duration':300, // path duration
        'strokeWidth': 3, // all style attr can be set individually
        'reverse': true	// reverse stroke individually
        'ease': 'easeInOutExpo'	// ease stroke individually
        'onStrokeStart': function(){console.log("Stroke started")}
        'onStrokeComplete':  function(){console.log("Stroke completed")}
        'onStrokeUpdate':  function(){console.log("Stroke update")}
    }, {
        'path': "M155.85,29c0...."
        'duration':1000
    }, {
      etc ...
    ],
    // dimensions of viewbox
    'dimensions' : {
      'width': 270,
      'height':266
    }
  }
}

If you like our content, please consider buying us a coffee.
Thank you for your support!
Buy Me a Coffee