title: How to sequence animations using snap.svg?
body: <p>I'm trying to animate several objects in a sequence using <a href="http://snapsvg.io/" rel="nofollow">http://snapsvg.io/</a>. </p>
  
  <p>I want the first object to move, and once that's complete the second object to move etc.</p>
  
  <p>Instead with the following code everything animates simultaneously. </p>
  
  <pre><code>    var s = Snap("#svg");
  
      var triangle = s.path("M200 200,L600,500 L200,500 L200,200");
  
      var triangleClone = triangle.clone();
      triangleClone.animate({'transform' : 'r90,200,200 T400,300'}, 1000);
  
      var triangleClone2 = triangle.clone();
      triangleClone2.animate({'transform' : 'r180,200,200 T100,700'},1000);
  
      var triangleClone3 = triangle.clone();
      triangleClone3.animate({'transform' : 'r270,200,200 T-300,400'},1000);
  </code></pre>
  
  <p>What approach do you need to take to control when things animate? There doesn't seem to be one call back to hook into. </p>