const g = Snap("#svgElem");

const rectEl = g.select("#rect");
const rects = [
  rectEl,
  ...Array.from(Array(100)).map((_, idx) => {
    return rectEl.clone();
  }),
];

const invisiblePath = g.select("#followPath_invisible");
const lenPath = Snap.path.getTotalLength(invisiblePath.attr("d"));
const path0Pos = invisiblePath.getPointAtLength(0);

const getTransformFromPos = ({ x, y, alpha, idx }) =>
  "t" + [x, y] + "r" + (alpha - 90) + idx;

rects.forEach((rect) => {
  rect.attr({
    transform: getTransformFromPos(path0Pos),
    "fill-opacity": 0,
  });
});

const isAtEnd = (val) => val >= lenPath - 1 || val <= 1;

const getOpacityByIndex = (idx) =>
  idx === 0 ? 1 : (100 - idx) / 100 - ((100 - idx) / 100) * 0.6;

const $button = document.getElementById("ButtonAnimation");

AnimateRects();

function AnimateRects() {
  Snap.animate(
    0,
    lenPath + rects.length * 2,
    function (val) {
      let currVal = val;
      const positions = rects.map(
        (rect) => ({
          rect,
          val: (currVal -= 2),
        }),
        val
      );

      positions.forEach(({ rect, val }, idx) => {
        var posRect = invisiblePath.getPointAtLength(val);
        const opacity = getOpacityByIndex(idx);
        rect.attr({
          transform: getTransformFromPos({ ...posRect, idx }),
          "fill-opacity": isAtEnd(val) ? 0 : opacity,
        });
      });
    },
    3000,
    mina.linear,
    AnimateRects
  );
}
Animated SVG Gradient Path
