Skip to content
Moves a DOM element along an SVG path (or do whatever along a path...)
HTML JavaScript
Branch: master
Clone or download
yairEO - updated to a non-backward-compatible version (1.5.0)
- New API, please review README.md
- added demos
Latest commit 84fb6dd Oct 20, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demos - updated to a non-backward-compatible version (1.5.0) Oct 19, 2017
.gitattributes first commit Mar 14, 2013
.gitignore first commit Mar 14, 2013
README.md - updated to a non-backward-compatible version (1.5.0) Oct 19, 2017
index.html - Oct 17, 2017
pathAnimator.js - updated to a non-backward-compatible version (1.5.0) Oct 19, 2017

README.md

Path Animator

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

DEMO PAGE

Basic use example:

var path             = "M150 0 L75 200 L225 200 Z";    // an SVG path
    pathAnimator,
    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
}

Settings

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
You can’t perform that action at this time.