title: Troubleshooting Raphael translation animation
body: <p>I'm attempting to use Raphael to make a small game, and just want a bit of advice on some code I'm working on.</p>
  
  <p>Here's what I have so far, its just a simple example of moving a circle around the screen:</p>
  
  <pre><code>&lt;script type="text/javascript" charset="utf-8"&gt;
  window.onload = function () {
    var paper = Raphael(10, 50, 320, 200);
    var paper = Raphael(document.getElementById("holder"), 320, 200);
    var paper = Raphael("holder", 320, 200);
  
    var startx = 30;
    var starty = 30;
    var ANIM_STEP = 5;
  
    var d = paper.circle(startx,starty,20);
    d.attr("fill", "blue");
    document.onkeyup = function (e) {
      var keyid = e.keyCode;
  
      switch (keyid)
      {
        // right arrow key
        case 39:
          startx += ANIM_STEP;
          d.cx = d.cx || startx ;
          d.animate({cx: d.cx}, startx);
        break;
      }
    }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>Now, the current issue that I'm having is that it only animates the first time the right arrow key was clicked.  I verified that 'startx' is incremented with some trace debugging.</p>
  
  <p>I started from the Raphael <a href="http://raphaeljs.com/playground.html" rel="nofollow noreferrer">circle example</a> and mashed in a bit from the <a href="http://raphaeljs.com/ichart.html" rel="nofollow noreferrer">ichart</a>, so my way might not be the best...I look forward to your suggestions :)</p>