<div class="ball"></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%;
}
View Compiled
gsap
  .timeline({
    repeat: -1,
    defaults: {
      duration: 1.5
    }
  })
  .to('.ball', {
    x: 200,
    scale: 2,
    ease: "bounce"
  })
  .to('.ball', {
    x: 0,
    scale: 1,
    ease: "back.inOut(3)"
  })
  .to('.ball', {
    x: -200,
    scale: 2,
    ease: "bounce"
  })
  .to('.ball', {
    x: 0,
    scale: 1,
    ease: "back.inOut(3)"
  });
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.2/gsap.min.js