Question

I have a path which I want to animate every 5 seconds. I tried the using setInterval in the following code but it keeps duplicating the canvas. Is there an easier solution?

JS Fiddle Link

window.onload= function aa () {

    paper = Raphael(0,0,900,900);    

    var p=paper.path("M10,10 h20 v10 h-20z");
    p.animate({path:"M10,10 h300 v10 h-300z"},5000);

    //window.setInterval(aa(), 5000);
}​

Answer 1

You are repeating the whole aa function that initializes the raphael paper (paper = Raphael(0,0,900,900);). That’s why your canvas gets duplicated.
Moreover, it would be better to use callbacks (you can see the the docs on animate) rather than setInterval to trigger your animations.
This is how I would code it :

function init(){
    var paper = Raphael(0, 0, 900, 900),
        pathsString = ["M10,10 h20 v10 h-20z","M10,10 h300 v10 h-300z"],
        p = paper.path(pathsString[0]),
        animationCounter = 0, 
        animationDuration = 5000,
        animate = function(){
            animationCounter++;
            p.animate({path : pathsString[animationCounter %2]}, animationDuration, animate);
        };

    animate();
};
window.onload = init;​

Here’s a working example of the above code.