Raphael.js Sketch Animation

Just a simple script to animate Raphael.js paths. The code takes an object array list of strokes with a time value to wait between strokes.

var strokes = [ { stroke: "M50 500", time: 0},
                { stroke: "l200 60", time: 800},
                { stroke: "l300 -400", time: 600},
                { stroke: "l-150 -20",  time: 300},
                { stroke: "l-180 350", time: 200},
                { stroke: "l-160 -80", time: 800},
                { stroke: "L50 500", time: 600}];

var drawnPath = strokes[0].stroke;
var paper = Raphael(10, 10, 800, 600);
var myPath = paper.path(drawnPath);
var section = 1;
myPath.attr({
    "stroke-width": 4,
    "stroke": "#060",
    "stroke-opacity": 0.5
});

animatePath();

function animatePath() {
    if (section < strokes.length) {
        drawnPath += strokes[section].stroke;
        myPath.animate({
            path: drawnPath
        }, strokes[section].time, animatePath);
        section++;
    }
}

http://jsfiddle.net/CkL5F/1/

This entry was posted in JavaScript. Bookmark the permalink.
  • Błażej Klisz

    Great code, it hepled me a lot. Thanks!

    • KBadMike

      I’m glad you found it helpful.

  • http://twitter.com/frontmesh Vladimir Vujosevic

    Nice code, but is only working for straight line and not for curved line.