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.

3 Responses to Raphael.js Sketch Animation

  1. Błażej Klisz says:

    Great code, it hepled me a lot. Thanks!

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

Leave a Reply

Your email address will not be published. Required fields are marked *