Animate raphael objects

Question

I'm quite new to raphael.js and I'm trying to animate raphael elements. For example, I've drawn an arrow using paper.path().

var arrow = paper.path("M10,10L100,100");
arrow.attr({
    "stroke-width": 5,
    "stroke-dasharray": "-.",
    "arrow-end": "classic-wide-long"
});

How do I make the arrow's color seem like flashing when it's drawn?

Answer 1

Use .animate(). E.g.,

arrow.animate({
    "25%": {stroke: "pink", easing: "bounce"},
    "50%": {stroke: "red", easing: "bounce"},
    "75%": {stroke: "pink", easing: "bounce"},
    "100%": {stroke: "red", easing: "bounce"}
},2500);

Where the percentages are the frame steps to reaching the specified duration (2500ms in this case).