<div class="ball"></div>
<div class="ball2"></div>
<div class="ball3"></div>

body {
  background: #2F243A;
  display: flex;
  width: 99vw;
  height: 99vh;
  justify-content: center;
  align-items: center;
}

.ball {
  background: #DB8A74;
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.ball2 {
  background: #d16b4f;
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.ball3 {
  background: #b63b19;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

gsap
  .timeline({
    defaults: {
      duration: 1.5
    }
  })
  .add('start')
  .to('.ball', {
    x: 300,
    scale: 2,
    ease: "bounce"
  }, 'start')
  .to('.ball2', {
    x: 300,
    scale: 2,
    ease: "bounce"
  }, 'start')
  .to('.ball3', {
    x: 300,
    scale: 2,
    ease: "bounce"
  }, 'start')