title: Snap SVG animating existing matrix
body: <p>I use <a href="http://snapsvg.io/" rel="nofollow">Snap.svg</a> to create a simple card game. I loaded drawed cards from file and moved them to specific location using matrix translate.</p>
  
  <p>It's svg element now looks kinda like this:</p>
  
  <pre><code>&lt;g id="card11" inkscape:label="#g3908" transform="matrix(1.5621,0,0,1.5621,625.1085,529.3716)" cardposition="4" style="visibility: visible;" class="card inhand hand-4 ofplayer1"&gt;...&lt;/g&gt;
  </code></pre>
  
  <p>However, now I'm trying to animate them to a specific position (same for all cards) using this:</p>
  
  <pre><code>function animateTo(object, x, y, scaleX, scaleY, time) {
          var matrix = object.transform().localMatrix;
          var added = new Snap.Matrix();
          added.translate(x, y);
          added.scale(scaleX, scaleY);
          added.add(matrix);
          object.animate({transform: added}, time);
      }
  </code></pre>
  
  <p>or something like this:</p>
  
  <pre><code>function animateTo(object, x, y, scaleX, scaleY, time) {
          object.animate({transform: "t100,100"}, time);//this one I tried to use to understand how snap animations works
      }
  </code></pre>
  
  <p>And here is my problem - when it animates, it allways first deletes the animation matrix of object and start animate from it's original location with blank matrix (where the object would be without transform attribute).
  For example, when I tried:</p>
  
  <pre><code>var matrix = object.transform().localMatrix;
  object.animate({transform: matrix}, time);
  </code></pre>
  
  <p>I expected it will do nothing, but my object blinks to the top left corner (blank matrix) and animates to position where it should stay.</p>
  
  <p>What am I doing wrong? I need to animate that object from some matrix state to another (ideally the same one for every object). Is it somehow possible? Like I can specify start transform attribute somehow?</p>
  
  <p>Thanks.</p>