JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>

JavaScript

var numCircles = 10;
var width = 20;
var duration = 8;
var ease = Power0.easeNone;
var circles = [];
var tweens = [];
var path = [
  { opacity: 1, x: window.innerWidth * 0.25, y: -window.innerHeight * 0.25, backgroundColor: '#0c0' },
  { opacity: 1, x: window.innerWidth * 0.75, y: window.innerHeight * 0.25, backgroundColor: '#c00' },
  { opacity: 0, x: window.innerWidth, y: 0, backgroundColor: '#c0c' },
];

for (var i = 0; i < numCircles; i += 1) {
	var circle = document.createElement('div');
  TweenMax.set(circle, {
  	position: 'absolute',
    top: '50%',
    left: 0,
    y: 0,
    x: 0,
    opacity: 0,
    height: width,
    width: width,
    yPercent: -50,
    xPercent: -50,
    borderRadius: width * 0.5,
    backgroundColor: '#cc0',
    force3D: true
  });
  circles[i] = circle;
  tweens[i] = TweenMax.to(circle, duration, {
  	repeat: -1,
  	bezier: { values: path, type: 'thru', curviness: 0.4 },
    ease: ease
  }).progress(i / numCircles);
  document.body.appendChild(circles[i]);
}