<svg id="motionPath" viewBox="-20 0 557 190">
  <path id="path" fill="none" d="M8,102 C15,83 58,25 131,24 206,24 233,63 259,91 292,125 328,155 377,155 464,155 497,97 504,74"/>
</svg>

<div id="box">
  
</div>
body {
  background-color: black;
  overflow: hidden;
}

#motionPath {
  overflow: visible;
  height: 100%;
  max-width: 100%;
}

#motionPath path {
  stroke-width: 2;
  stroke: gray;
}

#box {
  width: 100px;
  height: 100px;
  background-color: rgba(136, 206, 2, 0.6);;
  border: 2px solid white;
  position: absolute;
  top: 0;
  left: 0;
}

//register the plugin (just once)
gsap.registerPlugin(MotionPathPlugin);

var tween = gsap.to("#box", {
  motionPath: {
    path: "#path",
    align: "#path",
    alignOrigin: [0.5, 0.5], // <-- play with these numbers
    autoRotate: true
  },
  duration: 5, 
  ease: "power1.inOut",
  repeat: 100,
  yoyo: true
});

// to make it responsive on window resize...
window.addEventListener("resize", function() {
  var time = tween.totalTime();
  tween.seek(0).invalidate().totalTime(time);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MotionPathPlugin.min.js
  3. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MotionPathHelper.min.js