Raphael JS : how to move/animate a path object?

javascript animation path raphael move
Dylan picture Dylan · Jun 8, 2011 · Viewed 32k times · Source

Somehow this doesn't work...

var paper = Raphael("test", 500, 500);

var testpath = paper.path('M100 100L190 190');

var a = paper.rect(0,0,10,10);
a.attr('fill', 'silver');

a.mousedown( function() {
  testpath.animate({x: 400}, 1000);
});

I can move rects this way but not paths, why is that, and how do I move a path object then?!

Answer

TimDog picture TimDog · Jun 25, 2012

With the latest version of Raphael, you can do this:

var _transformedPath = Raphael.transformPath('M100 100L190 190', 'T400,0');
testpath.animate({path: _transformedPath}, 1000);

This saves you from the trouble of having to clone a temp object.

Related questions

CSS Animation onClick

How can I get a CSS Animation to play with a JavaScript onClick? I currently have: .classname { -webkit-animation-name: cssAnimation; -webkit-animation-duration:3s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease; -webkit-animation-fill-mode: forwards; } @-webkit-keyframes cssAnimation { from { -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(100px); } to { -webkit-transform: rotate(0…

Read More
How to run two jQuery animations simultaneously?

Is it possible to run two animations on two different elements simultaneously? I need the opposite of this question Jquery queueing animations. I need to do something like this... $('#first').animate({ width: 200 }, 200); $('#second').animate({ width: 600 }, 200); but to run …

Read More
jQuery animated number counter from zero to value

I have created a script to animate a number from zero to it's value. Working jQuery Not Working I now want to run the script several times on the page for each matching class. Below is what I am trying …

Read More