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 numContainers = 1;
var numShapes = 20;
var shapeDimensions = 100;
var shapeScaleFactor = 0.2;
var shapeRotationFactor = 20;

for (var i = 0; i < numContainers; i += 1) {
	var container = document.createElement('div');
	for (var j = 0; j < numShapes; j += 1) {
  	var shape = document.createElement('span');
    TweenMax.fromTo(shape, 2, {
    	position: 'absolute',
      yPercent: -50,
      xPercent: -50,
      width: shapeDimensions,
      height: shapeDimensions,
      zIndex: -j,
      opacity: 1 / numShapes * (numShapes - j) + 1 / numShapes,
      rotation: 0,
      scale: 1,
      backgroundColor: ['#cc0', '#c0c'][j % 2]
    }, {
    	bezier: {
      	values: [
          {
            scaleX: 1 / numShapes * j,
            scaleY: 1 / numShapes * j
          },
          {
            scaleX: 1,
            scaleY: 1
          }
        ]
      },
    	rotation: 360 / numShapes * (numShapes - j) + 360 / numShapes,
      repeat: -1,
      yoyo: true,
      ease: Power4.easeInOut
    });
  	container.appendChild(shape);
  }
  mainContainer.appendChild(container);
}

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