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?

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?

• javascript
• html
• svg
• raphael

3 Answers 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.

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

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 ..