JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Lazy Line Painter

    A jQuery plugin for SVG path animation
    Filed under 

    • 🔾50%Overall
    • 1,654
    • 15.4 days
    • 🕩349
    • 👥2

    Lazy Line Painter

    undefined undefined undefined undefined

    Lazy Line Painter

    lazylinepainter.info

    A Modern JS library for SVG path animation

    Getting Started | Documentation | Examples | Lazy Line Composer



    Getting Started

    Lazy Line Painter Lazy Line Painter can be setup with minimal effort as per the Quick Start instructions.

    However if a GUI is more your thing, be sure to use the Lazy Line Composer.
    A free Online Editor developed specifically for SVG path animation.


    NPM
    npm i lazy-line-painter
    
    CDN
    <script src="https://cdn.jsdelivr.net/npm/lazy-line-painter@1.9.4/lib/lazy-line-painter-1.9.4.min.js"></script>
    
    DOWNLOAD
    <script src="./libs/lazylinepainter-1.9.4.js"></script>
    



    Quick Start

    The most basic, no-frills implementation;

    
    // import LazyLinePainter
    import LazyLinePainter from 'lazy-line-painter'
    
    // select your svg
    let el = document.querySelector('#my-svg')
    
    // initialise & configure LazyLinePainter
    let myAnimation = new LazyLinePainter(el, { strokeWidth : 10 })
    
    // paint! :)
    myAnimation.paint()
    



    Documentation


    Configuration

    Configure on initialisation

    On initialise you can pass lazylinepainter a config object as an argument containing the attritubes you wish to alter across the entire svg.
    All config properties are optional.
    Style attributes set in the config will override css styles.

    
    let config = {
    
        // style properties
        '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'
    
        // animation properties
        'delay'           // Delay before animation starts
        'reverse'         // reverse playback
        'ease'            // penner easing - easeExpoOut / easeExpoInOut / easeExpoIn etc
        'repeat'          // number of additional plays, -1 for loop
    }
    
    let svg = document.querySelector('#my-svg') 
    let myAnimation = new LazyLinePainter(svg, config)
    


    Configure individual paths

    Data attributes can be used to configure style & animation properties on individual paths in the SVG.
    Data attributes will override both css styles & initialisation config style attributes.

    <path
        // style attribues
        data-llp-stroke-width
        data-llp-stroke-color
        data-llp-stroke-opacity
        data-llp-stroke-cap
        data-llp-stroke-join 
        data-llp-stroke-dash
    
        // animation attribues
        data-llp-duration (ms)
        data-llp-delay (ms) // delay offset from start of timeline
        data-llp-reverse (default = false)
        data-llp-ease (default = 'easeLinear')
    />
    



    API Reference

    Methods

    Paint - accepts optional playback arguments - reverse, ease, delay

    myAnimation.paint( { 
        reverse : true, 
        ease : 'easeExpoOut' 
    });
    

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

    myAnimation.erase();
    

    Pause

    myAnimation.pause();
    

    Resume

    myAnimation.resume();
    

    Set - set options after initialisation

    // progress - sets path position, second param accepts a number between 0 - 1
    myAnimation.set('progress', value);
    

    Get - returns all lazylinepainter data;

    myAnimation.get();
    

    Destroy - destroys svg & lazyline instance

    myAnimation.destroy();
    



    Events

    Handle events across entire animation
    myAnimation.on('start', () => {});
    myAnimation.on('update', () => {});
    myAnimation.on('complete', () => {});
    
    Handle all events

    Called for each shape animated within the svg.
    event argument contains shape properties.

    myAnimation.on('start:all', (event) => {});
    myAnimation.on('update:all', (event) => { console.log(event.progress); // [0-1] });
    myAnimation.on('complete:all', (event) => {});
    
    Handle targeted events.

    Listen to events on specific shapes by adding the shape-id after the colon.
    event argument contains shape properties.

    myAnimation.on('start:id', (event) => {});
    myAnimation.on('update:id', (event) => {});
    myAnimation.on('complete:id', (event) => {});
    
    Timeline playback events
    myAnimation.on('pause', () => {});
    myAnimation.on('resume', () => {});
    myAnimation.on('erase', () => {});
    



    Examples



    Changelog

    Refer to Release notes for entire Changelog



    Author

    Cam O'Connell @ http://merriment.info/
    Email - camoconnell@gmail.com

    Show All