title: How to animate on path with Snap SVG?
body: <p>I am trying to create an animation with snap.svg. </p>
  
  <p>I have created a north and south line, and a circle. I am trying to animate the circle along both paths from bottom to top. </p>
  
  <pre><code>var north_line = paper.path("M335.8 137.6v163.1").attr({
    id: "north",
    fill: "#fff",
    strokeWidth: "5",
    stroke: "#000"
  });
  
  var south_line = paper.path("M334.3 398v163.2").attr({
    id: "south",
    fill: "#fff",
    strokeWidth: "5",
    stroke: "#000",
    "stroke-dashoffset": bot_line
  });
  </code></pre>
  
  <p>Currently I have the animation working but the circle is starting the animation from the top of the line rather than below it, how can I change the direction? </p>
  
  <pre><code>var greenCircle = paper.circle(32,32,8);
    greenCircle.attr({
      fill: "#FF5252",
      strokeWidth: 14
    });
  
    setTimeout( function bottom() {
      Snap.animate(0, bot_line, function( value ) {
         movePoint = south_line.getPointAtLength( value );
         greenCircle.attr({ cy: movePoint.y, cx: movePoint.x }); 
        // move along path via cx &amp; cy attributes
      }, 700,mina.easeinout);
    });
  </code></pre>
  
  <p>This Fiddle should provide more clarity to what I am trying to accomplish. </p>
  
  <p><a href="http://jsfiddle.net/4wLrjmcq/1/" rel="nofollow">http://jsfiddle.net/4wLrjmcq/1/</a></p>
  
  <p>I am trying to figure out to create several circles and have them repeat animating up the path to the top. Would using a loop be best to achieve this to create multiple circles and then have them animate on the path using an interval?</p>
  
  <p>Any guidance is much appreciated!</p>
  
  <p>Thank you</p>