How to animate on path with Snap SVG?

Question

I am trying to create an animation with snap.svg.

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.

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
});

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?

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 & cy attributes
    }, 700,mina.easeinout);
  });

This Fiddle should provide more clarity to what I am trying to accomplish.

http://jsfiddle.net/4wLrjmcq/1/

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?

Any guidance is much appreciated!

Thank you

As for the directional issue, you can change the coordinates of south_line from `M334.3 398v163.2` to `M334.3 561.2v-163.2` (561.2 being 398+163.2, and the 163.2 in negative to have it go the other way). http://jsfiddle.net/4wLrjmcq/2/ — Max Starkenburg, May 15 '16 at 00:31
And here is a question on repeating animations with Snap.svg: http://stackoverflow.com/questions/20206345 — Max Starkenburg, May 15 '16 at 00:35

score 0 · Answer 1 · answered Apr 05 '18 at 21:37

Try swapping 0 and bot_line in Snap.animate that is

    setTimeout(function bottom() {
        Snap.animate(
            bot_line,  // <==
            0,         // <==
            function(value) {
                movePoint = south_line.getPointAtLength(value);
                greenCircle.attr({ cy: movePoint.y, cx: movePoint.x });
            },
            700,
            mina.easeinout
        );
    });

How to animate on path with Snap SVG?

1 Answers1