Raphael .animate on path attribute jumps from one state to the other, no transition

Question

I've got a problem with what looks to me like perfectly fine simple Raphael.js code to animate a path moving from one location to another by using the .animate() method on the path: attribute, passing the path in its new location.

But, instead of smoothly transition from the old path to the new, it pauses for an amount of time equal to the transition time, then jumps straight to the end of the animation.

Everything in the code that I can see seems to follow the documentation and standard patterns, and since it's not crashing but giving unexpected behaviour, I've got no messages or direct feedback to work with.

The animation works, but skips the intermediate transition steps. How, why?

Here's a JSBIN live demo of the code...

...and here's the example code.

var paper = Raphael("huh", '100%', '100%');

paper.customAttributes.pathX = function( x ) {
    var path = this.attr('path');
    var origin = getPathOrigin(path);
    return { path: Raphael.transformPath(path, ['T', x - origin.x, 0 ]) };
};
paper.customAttributes.pathY = function( y ) {
    var path = this.attr('path');
    var origin = getPathOrigin(path);
    return { path: Raphael.transformPath(path, ['T', 0, y - origin.y]) };
};
paper.customAttributes.pathXY = function( x,y ) {
    var path = this.attr('path');
    var origin = getPathOrigin(path);
    return { path: Raphael.transformPath(path, ['T', x - origin.x, y - origin.y ]) };
};

function getPathOrigin(path) {
    return {x: path[0][1], y: path[0][2]};
}

var path = paper.path('M 100 100 L 105 105 L 95 105 L 95 95 L 105 95 L 100 100');

var origin = getPathOrigin(path);

path.attr({pathX: origin.x, pathY: origin.y, pathXY: [origin.x, origin.y]});

path.animate({pathX: 200},1000, 'linear', function(){
  path.animate({pathY: 200},1000, 'elastic', function(){
    path.animate({pathXY: [50,50]}, 1000, 'bounce');
  });
});

path.animate({pathX: 200},1000, 'linear');

score 0 · Accepted Answer · edited May 23 '17 at 12:27

I figured out just before posting that the problem was due to the animation using a customAttribute that hadn't been properly set before the animation began. Posting anyway because this issue isn't clearly documented.

In Raphael 2.1, customAttributes need to be set with a numeric value before they are animated the first time (e.g. using .attr(), else Raphael tries to calculate the intermediate transition 'tween' points by using numeric operators on non-numeric values like undefined, which won't work.

(in my case, I had code which I thought would be enough to prevent this, but it had a fault which wasn't enough to cause an error, but was enough to cause the attr to not be properly set as a numeric value. Check that the attr you want to animate has a numeric value just before the animation that isn't working)

You'll see the same problem if you manage to get an unrecognised non-numeric value into a Raphael attribute then animate it, or if you find another way to cause Raphael to try to 'tween' between a numeric value and a non-numeric starting point.

Working version of the code, with working customAttribute animations here.

Raphael .animate on path attribute jumps from one state to the other, no transition

1 Answers1