CODEWITHSUNDEEP
javascripthtmlsvgraphael
Jack Roscoe
Jack Roscoe

Reputation: 4313

How to animate 'Raphael' canvas?

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?

Upvotes: 3

Views: 2140

Answers (3)

Dmitry Baranovskiy
Dmitry Baranovskiy

Reputation: 1200

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.

Upvotes: 9

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195992

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

Upvotes: 0

JoseK
JoseK

Reputation: 31371

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

Upvotes: 3

Related Questions