MotionPath Plugin

How to set up the MotionPath Plugin for GSAP. This plugin allows you to animate an element along a path describe by something like an SVG.

Watch the Tutorial on YouTubeGet the Project Cloneable

Inside <head> tag

<script defer src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
<script defer src="https://unpkg.com/gsap@3/dist/MotionPathPlugin.min.js"></script>

Inside </body> tag

<script>
function initMotionPath() {
  gsap.registerPlugin(MotionPathPlugin);
  // declare a null tween variable
  let tween;

  function createTween() {
    // save progress before we kill tween if it exists.
    let progress = tween ? tween.progress() : 0;
    // kill any pre-existing tween.
    tween && tween.progress(0).kill();

    // create the tween
    tween = gsap.to("#dot", {
      motionPath: {
        path: "#path",
        align: "#path",
        alignOrigin: [0.5, 0.5],
        autoRotate: true
      },
      duration: 8,
      repeat: -1,
      repeatDelay: 1,
      ease: "none"
    });

    // update tween's progress
    tween.progress(progress);
  }
  createTween();

  // listen for window resize to recalculate tween.
  window.addEventListener("resize", createTween);
}

// run once DOM and scripts are all loaded.
document.addEventListener("DOMContentLoaded", initMotionPath);
</script>

‍