Question

Is it possible using the raphael.js or paper.js to draw a line with an arrow that moves with some animation morphing?

Answer 1

It’s not entirely clear what you’re trying to do, but the short answer to your question is almost certainly yes. I can only speak for RaphaelJS, but it’s easy to tell Raphael to morph from one path to the other. Consider this fiddle and that fiddle, both of which rely on using raphael’s animate function to modify the path element over time, often in conjunction with one or more transforms. The only caveat is that raphael’s built-in path morphing doesn’t always unwind in the way you might expect or desire. But in an attempt to animate something like the figure above, I’d do something like this:

var canvas = Raphael( 0, 0, 320, 240 );

var path1 = "M0,120 h300 l10,-10 l10,10 h100";
var path2 = "M0,120 h100 l10,-10 l10,10 h300";

var path = canvas.path( path1 ).attr( { stroke: 'black', fill: 'none', 'stroke-width': 1 } );

path.animate( { path: path2, stroke: 'red', 'stroke-width': 3 }, 3000, function()
              { path.animate( { path: path1, stroke: 'black', 'stroke-width': 1 }, 3000 ); } );

You can see this in action here.