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 });

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 });

• javascript
• animation
• raphael

Share Improve this question Follow edited Jan 31, 2012 at 14:12 matsko asked Jan 31, 2012 at 4:17 matskomatsko 22.2k2222 gold badges104104 silver badges146146 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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/qiao/EhCyd/1/

The only native interaction with the canvas position is done through the method setViewBox, however it doesn't animate a transition to the canvas position or zoom level. To achieve an animation, you can use a nifty javascript animation method window.requestAnimationFrame to smoothly transition to the viewBox state that you want.

First of all, initialize the method for all browsers:

    window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame   ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame    ||
        window.oRequestAnimationFrame      ||
        window.msRequestAnimationFrame     ||
        function( callback ){
            window.setTimeout(callback, 1000 / 60);
        };
})();

Here is an example code for animating panning

var viewBoxX = 0;
var viewBoxY = 0;

//@param direction 'up', 'down', 'right' or 'left'
function pan(direction) {
    var start = Date.now();

    function step(timestamp) {
        var progress = timestamp - start;
        var x = viewBoxX,
            y = viewBoxY;

        if(direction == 'up') {
            y = viewBoxY - progress * 0.7;
        }
        else if (direction == 'down') {
            y = viewBoxY + progress * 0.7;
        }
        else if(direction == 'right') {
            x = viewBoxX + progress * 0.7;
        }
        else {
            x = viewBoxX - progress * 0.7;
        }

        //Now we set the view box at the modified x and y coordinates
        //Replace 100,100 with the size of your canvas
        paper.setViewBox(x, y, 100, 100);
        if (progress < 400) {
            window.requestAnimFrame(step);
        }
        else {
            viewBoxX = x;
            viewBoxY = y;
        }
    }
    window.requestAnimFrame(step);
}