title: Animated path with arrow marker using Snap.svg
body: <p>I'm figuring out how I could animate a path with arrow marker at end. I'm trying to animate diagonal lines.</p>
  
  <p>You can see a running sample here: <a href="http://codepen.io/danieltnaves/pen/ZWryxm" rel="nofollow">http://codepen.io/danieltnaves/pen/ZWryxm</a></p>
  
  <pre><code>var animationsPaths = new Array();
  animationsPaths.push("M 100 10 L 200 110");
  animationsPaths.push("M 100 10 L 230 110");
  animationsPaths.push("M 250 110 L 300 10");
  animationsPaths.push("M 400 110 L 600 210");
  animationsPaths.push("M 700 210 L 800 10");
  animationsPaths.push("M 700 210 L 850 110");
  
  var paper = Snap("#paper");
  
  function animatePaths() {
     if (animationsPaths.length == 0) return;
     var line2 = paper.path(animationsPaths[0]);
     var lengthLine2 = line2.getTotalLength();
     console.log(animationsPaths);
     animationsPaths.shift();
  
     var Triangle = paper.polyline("0,10 5,0 10,10");
     Triangle.attr({
       fill: "#000"
     });  
  
     var triangleGroup = paper.g( Triangle ); // Group polyline
  
     Snap.animate(0, lengthLine2 - 1, function( value ) {
        movePoint = line2.getPointAtLength( value );
        triangleGroup.transform( 't' + parseInt(movePoint.x - 15) + ',' +     parseInt(movePoint.y - 15) + 'r' + (movePoint.alpha - 90));
     }, 500,mina.easeinout);
  
  
  line2.attr({
     stroke: '#000',
     strokeWidth: 2,
     fill: 'none', 
     // Draw Path
     "stroke-dasharray": lengthLine2 + " " + lengthLine2,
     "stroke-dashoffset": lengthLine2
      }).animate({"stroke-dashoffset": 20}, 500, mina.easeinout, animatePaths.bind( this ));
     }
  
     animatePaths();
  </code></pre>
  
  <p>Thanks!</p>