Question

I have two path elements. For the sake of description lets just say one is a heart and the other is a square with rounded corners.

I’m trying to get one to interpolate into the other like this:

http://raphaeljs.com/animation.html

This is easy enough to do but I need to do it based off the elements X position and not time.

So as I drag the path element between an Xval of 100 and 200 it will slowly morph into the second path until it finally completes the transformation at an X value of 200.

Does anyone have any idea how I might do this?

Answer 1

I’d use the drag handler (or you could bind to the mousemove event and feed the coordinates in as well) and use that to move between a starting position and a target animation based on the x or y coordinate and using Element.status. Check out the fiddle (based on yours):

And I’m sorry — I gave you a copy of your own fiddle back originally. Terribly poor form =( Try this one instead:

http://jsfiddle.net/kevindivdbyzero/MqFkP/2/