Question

I’m trying to get the scaling animation to work with RaphaelJS, but I’m having no luck. This is what my code looks like:

paper.animate({
scale : 2
});

But the animation doesn’t work. Is this the correct way to animate a scale effect using RaphaelJS or is something that has to manually animated (using a JavaScript interval and so on…)?

— EDIT —

My mistake, I was referring to an element.

elementFromPaper.animate({
scale : 2
});

Answer 1

Paper is a container of elements in Raphael, and it simply doesn’t have the animate method.
Only the elements such as circles, rects, etc .. has the animate method.
If you want to change the size of the container, you can use setSize.(But this will not scale any elements in the container).

EDIT: If you want to achieve an effect like zoom in or zoom out, you can use the setViewBox method.

EDIT2: scale is not in the list of element attributes, as listed in here

To animate with scale, you can use the generic transform parameter.

ele.animate({transform: 's2'}) // here `s2` means a 2x scale

I wrote a simple demo for you: http://jsfiddle.net/qiao/EhCyd/1/