__smm_static_temp_content__

Usage

Create a FollowPath instance with your element, path, and timing options, then call .animate().

const fp = new FollowPath({
  element: document.querySelector('.element'),
  duration: 3000,
  path: document.querySelector('polyline'),
  iterations: 2.5,
  rotate: true,
  delay: 500,

  easing(t) {
    return t < 0.5
      ? 4 * t * t * t
      : 1 - Math.pow(-2 * t + 2, 3) / 2;
  },

  callback() {
    console.log('done');
  },

  timeline: {
    '0%'()  { console.log('started') },
    '25%'() { console.log('25%') },
    '50%'() { console.log('halfway') },
    '75%'() { console.log('75%') }
  }
});

fp.animate();

Controls

fp.pause();                   // pause mid-animation
fp.play();                    // resume
fp.stop();                    // stop and reset progress

Progress tracking

console.log(`fps: ${fp.fps}`);
console.log(`progress: ${fp.getProgress()}%`);