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.3/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): Allowbeginandendvalues less than 0 and greater than 100%.
Method draw(begin, end, duration, options), Name, Type, Default, Description, ------------, ----------, ---------, -------------, begin, string, Path length to start drawing., end, string, 100%, Path length to finish drawing., duration, float, 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, 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) });