Awesome Open Source
Awesome Open Source

Path Animator

Moves a DOM element along an SVG path (or do whatever along a path...)


Basic use example:

var path             = "M150 0 L75 200 L225 200 Z";    // an SVG path
    startFromPercent = 10,  // start from 10% of the path
    stopAtPercent    = 70;  // stop at 70% of the path (which will then call the onDone function callback)

// initiate a new pathAnimator object
pathAnimator = new PathAnimator( path, {
    duration : 4, // seconds that will take going through the whole path
    step     : step,
    easing   : function(t){ return t*(2-t) },
    onDone   : finish(this)

pathAnimator.start( startFromPercent, stopAtPercent  );

function step( point, angle ){
    // do something every "frame" with: point.x, point.y & angle

function finish(){
    // do something when animation is done


Name Type Default Info
duration Number undefined (in seconds) the duration of going through the path
step Function undefined a callback function which is called on every frame
onDone Function undefined (optional) a callback function which will be called at the end
reverse Boolean false go back or forward along the path
startPercent Number 0 Where to start on the path, between 0% to 100%
easing Function 1000/60 (optional) mathematical function for easing
fps Number undefined (optional) frames per second

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
html (11,276
svg (577
animations (168