__smm_static_temp_content__

Timeline and Easing

Use timeline callbacks to trigger actions at specific percentages, and a custom easing function to control animation pacing.

const fp = new FollowPath({
  element: document.querySelector('.element'),
  duration: 4000,
  path: document.querySelector('path'),
  iterations: 3,
  rotate: true,
  delay: 300,

  easing(t) {
    // easeOutElastic
    const c4 = (2 * Math.PI) / 3;
    return t === 0
      ? 0
      : t === 1
        ? 1
        : Math.pow(2, -10 * t) * Math.sin((t * 10 - 0.75) * c4) + 1;
  },

  timeline: {
    '0%'()   { console.log('animation started') },
    '33%'()  { console.log('first third done') },
    '66%'()  { console.log('two thirds done') },
    '100%'() { console.log('iteration complete') }
  },

  callback() {
    console.log('all iterations finished');
  }
});

fp.animate();