JSFiddle - React, Tailwind, and code Playground

by Tahir Ahmed

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<div class="my-element">&nbsp;</div>

JavaScript

var numItems = 80;
var pool = [];
var element = null;
var iteratorX = -window.innerWidth * 0.5;
var iteratorY = -window.innerHeight * 0.5;
var angle = 0;
var width = 20;
var radius = 0;

TweenMax.set(document.body, {
	backgroundColor: '#9DC8C8'
});

for (var k = 0; k < numItems; k += 1) {
	element = document.createElement('span');
  iteratorX = radius * Math.cos(angle);
  iteratorY = radius * Math.sin(angle);
  radius += 2;
  //angle += (2*Math.PI) / numItems;
  angle += 1;
  TweenMax.fromTo(element, 1.2, {
    position: 'absolute',
    top: '50%',
    left: '50%',
    yPercent: -50,
    xPercent: -50,
    x: 0,
    y: 0,
    width: width,
    height: width,
    backgroundColor: ['#5CAB7D', '#5A9367', '#44633F', '#3F4B3B'][k % 4],
    borderRadius: '50%'
  }, {
  	delay: k * 0.01,
    repeat: -1,
    repeatDelay: 1.2,
    yoyo: true,
    x: iteratorX,
    y: iteratorY,
  	//x: getRandomInt(-window.innerWidth * 0.5, window.innerWidth * 0.5),
    //y: getRandomInt(-window.innerHeight * 0.5, window.innerHeight * 0.5),
    ease: Power2.easeInOut
  });
  pool[k] = element;
  document.body.appendChild(element);
}

function getRandomInt(min, max) {
	return Math.floor(Math.random() * (max - min + 1)) + min;
}