__smm_static_temp_content__

Basic Animation

Animate a <div> along an SVG <polyline> with rotation and play/pause/stop controls.

<svg xmlns="http://www.w3.org/2000/svg" height="700" width="1000">
  <polyline
    points="198,264 200,259 202,256 300,200 500,300 700,150 893,250"
    style="fill: transparent; stroke: black; stroke-width: 5px;" />
</svg>
<div class="element"></div>

const fp = new FollowPath({
  element: document.querySelector('.element'),
  duration: 3000,
  path: document.querySelector('polyline'),
  iterations: 2.5,
  rotate: true,
  callback() {
    console.log('done');
  }
});

fp.animate();

// Pause after 1 second
setTimeout(() => fp.pause(), 1000);

// Resume after another second
setTimeout(() => fp.play(), 2000);

// Stop after 6 seconds
setTimeout(() => {
  console.log(`fps: ${fp.fps}, iterations: ${fp.iterations}`);
  fp.stop();
}, 6000);