Wondering what’s next for npm?Check out our public roadmap! »

    segment-js

    1.1.2 • Public • Published

    Segment

    A JavaScript library to draw and animate SVG path strokes.

    See the DEMO.

    Read this article to understand how it works.

    Basic usage

    HTML

    Add the segment script, and define a path somewhere.

    <script src="https://cdnjs.cloudflare.com/ajax/libs/segment-js/1.1.2/segment.js"></script>
     
    <svg>
      <path id="my-path" ...>
    </svg>

    JavaScript

    Initialize a new Segment with the path. Then draw a segment of stroke every time you want with: .draw(begin, end, duration, options).

    var myPath = document.getElementById("my-path"),
        segment = new Segment(myPath);
     
    segment.draw("25%", "75% - 10", 1);

    Install with NPM

    npm install segment-js
    

    Constructor

    The Segment constructor asks for 4 parameters:

    • path: DOM element to draw.
    • begin (optional, default 0): Length to start drawing the stroke.
    • end (optional, default 100%): Length to finish drawing the stroke.
    • circular (optional, default false): Allow begin and end values less than 0 and greater than 100%.

    Method draw(begin, end, duration, options)

    Name Type Default Description
    begin string 0 Path length to start drawing.
    end string 100% Path length to finish drawing.
    duration float 0 Duration (in seconds) of the animation.
    options object null Options for animation in object notation.

    Note that begin and end can be negative values and can be written in any of these ways:

    • floatValue
    • percent
    • percent + floatValue
    • percent - floatValue

    All possible options for draw method

    Name Type Default Description
    delay float 0 Waiting time (in seconds) to start drawing.
    easing function linear Easing function (normalized). I highly recommend d3-ease.
    circular boolean false If true, when the stroke reaches the end of the path it will resume at the beginning. The same applies in the opposite direction.
    callback function null Function to call when the animation is done.

    Example

    function cubicIn(t) {
        return t * t * t;
    }
     
    function done() {
        alert("Done!");
    }
     
    segment.draw("-25%", "75% - 10", 1, {delay: 0.5, easing: cubicIn, circular: true, callback: done});

    Animating with another library

    It's possible to animate the path stroke using another JavaScript library, like GSAP. Segments offers a method called strokeDasharray that is useful for this issue. Here is an example using TweenLite (with CSSPlugin).

    TweenLite.to(path, 1, { strokeDasharray: segment.strokeDasharray(begin, end) });

    Install

    npm i segment-js

    DownloadsWeekly Downloads

    246

    Version

    1.1.2

    License

    MIT

    Last publish

    Collaborators

    • avatar