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>

JavaScript

var body = document.body;
var mainContainer = document.createElement('div');
var shapeRadius = 40;
var numShapes = 10;
var numContainers = 10;
var delayFactor = 0.2;
var maxRadius = 220;
var minRadius = 120;

for (var j = 0; j < numContainers; j += 1) {
	var container = document.createElement('div');
	for (var i = 0; i < numShapes; i += 1) {
    var shape = document.createElement('span');
    TweenMax.fromTo(shape, 6, {
      position: 'absolute',
      yPercent: -50,
      xPercent: -50,
      width: shapeRadius,
      height: shapeRadius,
      scale: 0.1,
      opacity: 0,
      x: minRadius * Math.cos(2 * Math.PI * i / numShapes),
      y: minRadius * Math.sin(2 * Math.PI * i / numShapes),
      borderRadius: '50%',
      backgroundColor: ['#f9320c', '#7200da', '#00b9f1', '#f9c00c'][j % 4]
    }, {
    	delay: j * delayFactor,
      bezier: {
      	values: [
          {
          	opacity: 1,
            scaleX: 1.4,
            scaleY: 1.4
          },
          {
          	opacity: 0,
            scaleX: 0.1,
            scaleY: 0.1
          }
        ]
      },
      x: maxRadius * Math.cos(2 * Math.PI * i / numShapes),
      y: maxRadius * Math.sin(2 * Math.PI * i / numShapes),
      repeat: -1,
      ease: Back.easeInOut
    });
    container.appendChild(shape);
  }
  TweenMax.fromTo(container, 6, {
  	rotation: j * (360 / numContainers),
    scale: j * 0.1
  }, {
  	delay: j * delayFactor,
    rotation: '+=180',
    repeat: -1,
    ease: Power2.easeInOut
  });
  mainContainer.appendChild(container);
}

TweenMax.to(mainContainer, 12, {
	rotation: 360,
  repeat: -1,
  ease: Power0.easeNone
});

body.appendChild(mainContainer);
TweenMax.set(mainContainer, {
	position: 'absolute',
  top: '50%',
  left: '50%',
  yPercent: -50,
  xPercent: -50
});
TweenMax.set(body, {
	margin: 0,
  padding: 0,
  overflow: 'hidden'
});