<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>

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

body {
  height: 100vh;
  background: linear-gradient(to bottom right, rgba(15, 34, 154, 1.0), rgba(146, 45, 166, 1.0));
}

.circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0px 0px 5px 2px rgba(255,255,255,0.5);
}

var circle = document.querySelectorAll('.circle');

var tl = new TimelineMax({ repeat: -1, yoyo: true });

tl.staggerFromTo(circle, 1, {
    autoAlpha: 0,
    scale: .1
  }, {
    autoAlpha: 1,
    scale: 1,
    bezier: {
      type: 'soft',
      values: [
        { x:  -50, y: -50 }, // P1
        { x: -100, y:   0 }, // P2
        { x:  -50, y:  50 }, // P3
        { x:   50, y: -50 }, // P4
        { x:  100, y:   0 }, // P5
        { x:   50, y:  50 }, // P6
        { x:    0, y:   0 }  // P7
      ]
    },
    stagger: .1
  });