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=""></script>
<script defer src=""></script>

Inside </body> tag

function initMotionPath() {
  // 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 ="#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

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

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