<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
      viewBox="0 0 1000 600" style="enable-background:new 0 0 1000 600;" xml:space="preserve">
   <style type="text/css">
      .st3{fill:url(#ball_9_);stroke:#000000;stroke-miterlimit:10;}
   </style>
   <linearGradient id="ball_9_" gradientUnits="userSpaceOnUse" x1="472.5" y1="153.5" x2="472.5" y2="193.5">
      <stop  offset="0" style="stop-color:#FFFFFF"/>
      <stop  offset="7.234823e-003" style="stop-color:#F6F6F6"/>
      <stop  offset="4.673683e-002" style="stop-color:#C8C8C8"/>
      <stop  offset="9.125553e-002" style="stop-color:#9D9D9D"/>
      <stop  offset="0.1391" style="stop-color:#777777"/>
      <stop  offset="0.1912" style="stop-color:#575757"/>
      <stop  offset="0.2487" style="stop-color:#3B3B3B"/>
      <stop  offset="0.3137" style="stop-color:#252525"/>
      <stop  offset="0.3896" style="stop-color:#141414"/>
      <stop  offset="0.4834" style="stop-color:#090909"/>
      <stop  offset="0.615" style="stop-color:#020202"/>
      <stop  offset="0.9803" style="stop-color:#000000"/>
   </linearGradient>
   <circle id="ball" class="st3" cx="472.5" cy="173.5" r="20"/>
   </svg>

html, body {
  height: 100vh;
  width: 100%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  font-size: 24px;
  overflow: hidden;
}

gsap.to('#ball', {
  y: 200,
  duration: 1.5,
  repeat: -1,
  ease: "bounce.out",
})