<div class="ball"></div>
<div class="shadow"></div>

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100vh;
  background-color: #ffc30f;
}

.ball {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #c70039;
  background: linear-gradient(to bottom, rgba(199,0,56,1) 0%, rgba(144,12,63,1) 100%);
  transform: translateY(-100px);
}

.shadow {
  width: 60px;
  height: 30px;
  background: radial-gradient(ellipse at center, rgba(88,24,69,1) 0%, rgba(237,237,237,0) 50%);
  position: relative;
  z-index: -1;
  transform: translateY(75px);
  opacity: .1;
}

var ball = document.querySelector('.ball');
var shadow = document.querySelector('.shadow');

var ease = Circ.easeIn;

var tl = new TimelineMax({ repeat: 8.5, yoyo: true });
tl.add('start')
  .to(ball, .50, {
    y: 100,
    ease: ease
  })
  .to(ball, .10, {
    scaleY: 0.6,
    transformOrigin: 'center bottom',
    borderBottomLeftRadius: '40%',
    borderBottomRightRadius: '40%',
    ease: ease
  }, '-=.05')
  .to(shadow, .5, {
    width: 90,
    opacity: .7,
    ease: ease
  }, 'start');