<svg viewBox="0 0 700 700">
  <line x1="0" x2="700" y1="701" y2="701" stroke="#ccc" stroke-width="2" />
  <path id="bounce" fill="none" stroke="#336633" stroke-width="4px"/>
  <path id="squash" fill="none" stroke="#663333" stroke-width="4px"/>
  <circle id="ball" fill="blue" r="75" cx="350" cy="75"/>
</svg>
<div id="nav">
<input id="progressSlider" type="range" min="0" max="1" value="0" step="0.001" />
<button id="play" class="dark-grey-button club-demo-button">play</button>
  </nav>

body {
  background-color: black;
}
svg {
  width:400px;
  position:relative;
  display:block;
  left: 50%;
  z-index: -1;
  overflow: visible;
  transform: translate(-50%, 0%);
}

#progressSlider {
  display:inline-block;
  position:relative;
  width:300px;
 
}

#nav {
  width:600px;
  margin:10px auto;
  text-align:center;
}

button {
  margin-left:10px;
  padding:10px;
}

//learn more about CustomBounce and CustomWiggle at: https://greensock.com/wiggle-bounce

var duration = 3;
var tl = gsap.timeline({delay: 0.2, onUpdate: updateUI});

//strength between 0 and 1
CustomBounce.create("myBounce", {strength: 0.7, squash: 3});
tl.to("#ball", {duration: duration, y: 550, ease: "myBounce"})
  .to("#ball", {duration: duration, scaleY: 0.5, scaleX: 1.3, ease: "myBounce-squash", transformOrigin: "bottom"}, 0)




//graph the lines...
//bounce ease green
CustomEase.getSVGData("myBounce", {path:"#bounce", width:700, height:500});
//squash ease red
CustomEase.getSVGData("myBounce-squash", {path:"#squash", width:700, height:500});

progressSlider = document.getElementById("progressSlider");

progressSlider.addEventListener("input", updateAnimation);

function updateAnimation(){
  tl.progress(progressSlider.value).pause();
}

function updateUI() {
  progressSlider.value = tl.progress();
}

document.getElementById("play").onclick = function() {
  if(tl.progress() == 1) {
    tl.restart()
  } else {
    tl.play();
  }
}