<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", {y:550, duration: duration, ease:"myBounce"})
  .to("#ball", {scaleY:0.5, duration: duration, 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();
  }
}

External CSS

  1. https://codepen.io/GreenSock/pen/AHquG

External JavaScript

  1. https://unpkg.co/gsap@3/dist/gsap.min.js
  2. https://assets.codepen.io/16327/CustomEase3.min.js
  3. https://assets.codepen.io/16327/CustomBounce3.min.js