[Swap 2 or more SVG elements]

Hi,

I've been trying to animate an SVG matrix, obtained by a Javascript matrix, but I have some problem when I try to swap the positions between 2 or more elements. 

Is there an easy way to do it? 

 

What I am currently doing is something like:

 

var  obj1 = elem1[0]._gsTransform;

var  obj2 = elem2[0]._gsTransform;

var new_obj1 = elem1[0]._gsTransform;
var new_obj2 = elem2[0]._gsTransform;

new_obj1.xOrigin = obj2.xOrigin-obj1.xOrigin;
new_obj1.yOrigin = obj2.yOrigin-obj1.yOrigin;

new_obj2.xOrigin = obj1.xOrigin-obj2.xOrigin;
new_obj2.yOrigin = obj1.yOrigin-obj2.yOrigin;

var tl = new TimelineMax();

tl.to(obj1, 0.5, {x:'+='+new_obj1.xOrigin, y:'+='+new_obj1.yOrigin}, 0.5)
  .to(obj2, 0.5, {x:'+='+new_obj2.xOrigin, y:'+='+new_obj2.yOrigin}, 0.5)

 

I don't stop/kill the timeline on each iteration.

This works but if I let the animation working and then I navigate in an other website after a while the animation goes crazy because all the new positions are wrong.  E.g: instead of being x=0, y=10 the position is x=-8, y=10.

 

Is there any example on the Internet on matrix animation? I'd like something like the fifteen puzzle or easier.

 

Massimiliano