<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);
});
This Pen doesn't use any external CSS resources.