Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lmgonzalves/segment
A JavaScript library to draw and animate SVG path strokes
https://github.com/lmgonzalves/segment
Last synced: 18 days ago
JSON representation
A JavaScript library to draw and animate SVG path strokes
- Host: GitHub
- URL: https://github.com/lmgonzalves/segment
- Owner: lmgonzalves
- License: mit
- Created: 2015-10-24T02:01:10.000Z (about 9 years ago)
- Default Branch: gh-pages
- Last Pushed: 2018-01-31T20:21:23.000Z (almost 7 years ago)
- Last Synced: 2024-04-14T12:39:26.743Z (7 months ago)
- Language: CSS
- Homepage: http://lmgonzalves.github.io/segment
- Size: 82 KB
- Stars: 1,738
- Watchers: 63
- Forks: 99
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Segment
A JavaScript library to draw and animate SVG path strokes.
See the [DEMO](http://lmgonzalves.github.io/segment).
Read [this article](http://lmgonzalves.github.io/2015/10/26/animating-svg-path-segments/) to understand how it works.
## Basic usage
**HTML**
Add the segment script, and define a `path` somewhere.
```html
```
**JavaScript**
Initialize a new `Segment` with the `path`. Then draw a segment of stroke every time you want with: `.draw(begin, end, duration, options)`.
```js
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](https://github.com/d3/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**
```js
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](http://greensock.com/gsap). `Segments` offers a method called `strokeDasharray` that is useful for this issue.
Here is an example using TweenLite (with CSSPlugin).
```js
TweenLite.to(path, 1, { strokeDasharray: segment.strokeDasharray(begin, end) });
```