Problems with animateAlong in IE7

Question

Hi there,

I'm having trouble making a simple shape move along a path in IE7 (the only version of IE I tried, actually). The following code works fine in chrome and firefox, but not IE. I couldn't find an obvious reason, has anybody seen something similar?

canvas.path(rPath.path).attr("stroke", "blue");
var circle = canvas.circle(rPath.startX, rPath.startY, 5);
circle.animateAlong(rPath.path, 3000, true);

My rPath variable has the path and the starting point coordinates.

Microsoft script debugger points to this line as the one where the code breaks:

os.left != (t = x - left + "px") && (os.left = t); (line 2131 inside the uncompressed raphael.js script file, inside Element[proto].setBox = function (params, cx, cy) {...})

Any ideas? Any experience (good or bad) with raphael's animateAlong in IE7?

TIA, Andrei

Answer 1

Create a circle using a real path..

Take this code... paper.path('M325 35a200 200 0 1 0 1 0' );

and play with it here... http://www.irunmywebsite.com/raphael/additionalhelp.html?q=animateAlong

Answer 2

It turned out to be the original coordinates of the moving circle, rPath.startX in my example. It was obtained by splitting a string, therefore a string value. While the positioning of the circle worked fine, the animateAlong was not as forgiving in IE.

Parsing it to an int before using it fixed the issue.