How to animate 'Raphael' canvas?

Question

Hi,

I'm using the Raphael library to create SVG objects.

To initialise the SVG shape and create a canvas for everything inside, I've used the following line as stated in the documentation:

var paper = Raphael(10, 50, 320, 200);

I now want to animate the paper and everything inside it, just like I would animate a shape which had been appended to the paper in the following maner:

var firstShape = paper.rect(x, y, width, height);
firstShape.animate({x: 100}, 500, "<");

When I try something similar with the paper such as:

paper.animate({x: 100}, 500, "<");

I get the error 'paper.animate is not a function'.

What's happening here, and how can I get around it?

Answer 1

Your closing bracket sequence is wrong

Change

paper.animate({x: 100, 500, "<")}; 

to

paper.animate({x: 100}, 500, "<"); 

UPDATE

From the docs, it does not seem that animate can be called directly on paper, but only on a sub-shape cut out of the canvas - that is why firstshape.animate works

Answer 2

You can not animate the drawing board... only the shapes inside it ..

paper is your drawing board.. whereas firstShape is a shape created inside the board ..

Answer 3

You can’t animate paper object. Paper has no attributes to animate. But you could unite all your elements into set and then animate it.