StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PORaphael .animate on path attribute jumps from one state to the other, no transition
text
Body
copied!<p>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 <code>.animate()</code> method on the <code>path:</code> attribute, passing the path in its new location.</p> <p>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. </p> <p>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. </p> <p>The animation works, but skips the intermediate transition steps. How, why?</p> <hr> <p>Here's a <a href="http://jsbin.com/ovahud/4/edit" rel="nofollow"><strong>JSBIN live demo</strong></a> of the code...</p> <p>...and here's the example code.</p> <pre><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'); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload