lmgonzalves / segment Goto Github PK

View Code? Open in Web Editor NEW

1.7K 63.0 99.0 84 KB

A JavaScript library to draw and animate SVG path strokes

Home Page: http://lmgonzalves.github.io/segment

License: MIT License

JavaScript 34.15% HTML 23.05% CSS 42.80%

segment's Introduction

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): 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) });

segment's People

Contributors

Stargazers

Watchers

Forkers

akdesign sunri5e cocavet rockmandew joeyibrows larthas dougdesigner 37972547 joeynimu davgit ismnoiet jesusoterogomez kk9599 daihuaye alihalabyah noscripter mr-justin mstarlogo xeronith saviio loganfreeman danilovaz paulhirschi mojolive mcanthony deutschlion vadimazzz rwatgg muresanandrei aaishaa qrb redgang kublaj chrisemoulton nandastone luckosracerfish premaebooks pooleworks rizopoulos ramirezwillow cs-jin jechtliu joxiemedina miknotauro bionicclick zhaoyu1105 leksa dwi-lanang thamoui travisbickle jadiehm driedel-zz pakipreneurs kikesan femotizo chadgaffin sshyran kube isravel bobquest33 filmtree puppycodes reyboo zen-aperios glivera rahulyhg tostegroo theold zwq8299174 patwic juanmanunez datayang mehdi-dali carlhuth dakani1 omidnasri zuanoc kenkelvinn mishalmsb teebo codegorrilla kashasup yidianier erickwang ykankaya techtheriac liuzhen88 ehking dmondma shailendra-chalasani mrsz neequ eagrisiol wanttosleep jingyuguantou 205yt205 davidalphafox ziw728 tinaxiaoxiao

segment's Issues

adding tags for the repo

Hello,

Adding tags for repo could specify points in history and mark release points.
It's helpful for user to know the version and status of repository, and would enable wider distribution of the library, for example it could be hosted by cdnjs (website)

Would you please consider on using tags?
Thanks for your great work!

How can i add more paths?

I have more than one path which i want to animate with TimelineLite plugin.
How can i add more paths in the following:
var s = document.getElementById("s"), // shield = document.getElementById('shield'), segment = new Segment(s);

d3-ease has new API?

I found the example use d3-ease as below:

ease.ease('elastic-out', 1, 0.3)

but according its documentation on github, the API seems different than your demo, something like:

d3.easeElasticOut(t, 1.00, 0.2)

since I'm not a d3 user, I really don't know which way I should follow. I use npm to install the latest version (I believe it is v1.0.0) and follow your demo, but it doesn't work. Later I change the syntax like:

import ease from 'd3-ease'

// somewhere

ease.easeElasticOut(1, 0.3)

it works...but it doesn't have any elastic-ish effect, very confusing.

Would you mind to explain a little more about how to use d3-ease with segment-js?

Dashed path possible?

We are exactly looking for this kind of solution The only i couldnt find is the possibility to make the path, dashed. Is this possible?

Thanks

Dennis

Cannot read property 'circular' of undefined

Keep getting this error, don't know how to solve it ?
here is my code.
testSegment.zip

segment.js:35 Uncaught TypeError: path.getTotalLength is not a function

Any solution for this please?

Scripts loaded as follows:
jquery-1.12.4.min.js
segment-js/1.0.8/segment.js

    var myPath = document.getElementById("dvr"),
        segment = new Segment(myPath);

    segment.draw("25%", "75% - 10", 1);

Lacks a Typescript Definition

Would be cool to be able to use with Typescript and Browserify.

Usage through NPM?

I would love to use this project in a small project of mine, currently built with webpack.

Using this project via NPM would require some changes, since the "main" entry point (dist/segment.js) isn't exporting any value. Would you consider either:

changing dist/segment.js to export the class (and then using something like webpack or browserify to build the demo website)
generating a new file (ex: dist/segment.node.js) by appending module.exports = Segment; at the end of segment.js, and changing the "main" entry point to this?

A new, trending way of distributing packages is to write ES6 code and add a "esnext:main" entry point in the package.json. This could be considered as well.

Also, for simplicity and visibility, it would be great to publish segment to the NPM registry.

'hasOwnProperty' of undefined

`$('.service-section').each(function() {
var el = $(this);
var topDistance = $(this).offset().top - $(window).height() + 200;
if ( (topDistance) < scrollTop ) {
var myPath = document.getElementById("glob"),
segment = new Segment(myPath);

        segment.draw("25%", "75% - 10", 1);
    }
});`

this code showing me an error 'hasOwnProperty' of undefined

Add Stop animation in object

I'm using segment to make a countdown, and if I skip the item before the animation end it still counting. If I come back to the item and try to start from zero the plugin ignores because the animationTimer still running.

I put the stop function visible to the object and use it to reset the counter... works perfectly :)

segment.min.js:7 Uncaught TypeError: Cannot read property 'getTotalLength' of null

how to fix this error