9

So I'm using Raphael JS to try and animate.

Here's what I've tried:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>  
    <script type="text/javascript" src="http://raphaeljs.com/raphael.js"></script>  
    <script type="text/javascript">
        $(window).load(function () {
            var R = Raphael("holder", 640, 480);
            var test = R.text(200, 200, "Test string");
            test.animate({cx: 20, cy: 20}, 2000);

        });
    </script>
</head>
    <body> 
        <div id="holder"> 
        </div> 
    </body> 
</html>

And my text just remains at 200,200. Any thoughts on why this won't work?

1 Answer 1

5

The animate function is only capable of certain attributes, and only able to animate attributes that belong to that particular object.

A text object does not have cx or cy attributes - so your example code will not animate.

You may only translate a text object as it only has x, y and text attributes.

http://raphaeljs.com/reference.html#text

If you are trying to translate the text, use the x and y attributes like this:

test.animate({x:20, y:20}, 2000);
2
  • Thanks @John, moving it with {x:20, y:20} was EXACTLY what I needed to do. I didn't realize text had x/y instead of what I was using (cx cy)
    – Incognito
    Sep 3, 2010 at 16:58
  • Awesome! I was worried you were trying to do a rotation and then be a bit disappointed with my answer, heehee. You are welcome!
    – John
    Sep 3, 2010 at 17:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.