A LIBRARY FOR SVG PATH ANIMATION

mobile friendly | responsive | and tiny (8kb gzip)

HOW IT WORKS

Follow these three easy steps to start animating svg paths.

Export your line art from Illustrator as an .SVG
Ensure there are no fills,
No closed paths - Line needs a start and end,
Crop Artboard nice & tight!

.SVG

Drop your .SVG file
into the
'SVG to Lazy Converter'.
& Copy the .JS code.
Each paths duration can be tweaked in the code!

.JS

Import Lazylinepainter. Paste Lazyline code with'in DOM ready function & publish - Boom!

SVG TO LAZY LINE CONVERTER

Copy data to clipboard

The Convertor is a free online tool
that prepares your svg for Lazy line to animate.
Upload your SVG as per the instructions above in 'HOW IT WORKS'.
Processing your SVG will only take a few seconds.
Play with stroke-width and color settings.
Once ready copy the code!

Lazy line API Reference

For further documentation and examples,
visit github.

Paint
Start animation,
draws line through path

paint()

Erase
Clear path - paint can still be
called on the element after it has been erased

erase()

Pause
Pause path animation
pause()

Resume
Resume path animation
resume()

Set
Sets path position,
second param accepts a number between 0 - 1;

set(num)

Get
Returns all lazylinepainter data;
get()

Destroy
Remove path - removes lazyline data and emptys element from DOM.
destroy()

Product of Merriment, © 2018