<h1>MotionPathPlugin (new in GSAP 3)</h1>

<svg width="100%" height="100%" viewBox="-20 0 557 190" id="svg">
	<circle cx="100" cy="100" r="3" />
	<circle cx="300" cy="20" r="3" />
	<path id="path" d="M9,100c0,0,18.53-41.58,49.91-65.11c30-22.5,65.81-24.88,77.39-24.88c33.87,0,57.55,11.71,77.05,28.47c23.09,19.85,40.33,46.79,61.71,69.77c24.09,25.89,53.44,46.75,102.37,46.75c22.23,0,40.62-2.83,55.84-7.43c27.97-8.45,44.21-22.88,54.78-36.7c14.35-18.75,16.43-36.37,16.43-36.37"/>
	<g id="rect">
		<rect width="85" height="30" fill="dodgerblue" />
		<text x="10" y="19" font-size="14">SVG &lt;rect&gt;</text>
	</g>
</svg>

<div id="div">#div</div>





<link href='//fonts.googleapis.com/css?family=Signika+Negative:300,400' rel='stylesheet' type='text/css'>



<a href="https://greensock.com" target="_blank"><img class="gsap-3-logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-3-logo.svg" width="150" /></a>

circle {
  fill: black;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
h1 {
  color: white;
}
#rect text {
  pointer-events: none;
}

body {
  background-color: black;
  color: #999;
  font-family: "Signika Negative", Arial, sans-serif;
  font-weight: 300;
  font-size: 17px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

}
svg {
  overflow: visible;
  height: 100%;
  
  /* Fix Safari rendering bug */
  transform: translateZ(0);
}

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

a {
  color: #88ce02;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
#div {
  width: 120px;
  height: 60px;
  pointer-events: none;
  background-color: #aa00ee;
  color: black;
  text-align: center;
  line-height: 60px;
  position: absolute;
  top: 30%;
  left: 60%;
  font-size: 32px;
}





.gsap-3-logo {
    width: 20vw;
    max-width: 150px;
    position: fixed;
    bottom: 15px;
    right: 15px;
}

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

gsap.to("#rect", {
  duration: 5, 
  repeat: 12,
  repeatDelay: 3,
  yoyo: true,
  ease: "power1.inOut",
  motionPath:{
    path: "#path",
    align: "#path",
    autoRotate: true,
    alignOrigin: [0.5, 0.5]
  }
});