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 width = 1;
var height = 200;
var numShapes = 200;
var rotationDivision = 360 / numShapes;
var shapes = [];

for (var i = 0; i < numShapes; i += 1) {
	var shape = document.createElement('span');
  shapes[i] = shape;
  mainContainer.appendChild(shape);
}

TweenMax.staggerFromTo(shapes, 0.4, {
  position: 'absolute',
  top: '50%',
  left: '50%',
  xPercent: -50,
  yPercent: -100,
  cycle: {
  	rotation: function(index) {
    	return rotationDivision * index;
    }
  },
  transformOrigin: '50% 100%',
  backgroundColor: '#cc0',
  scaleY: 0.4,
  width: width,
  height: height
}, {
	repeat: -1,
  yoyo: true,
	scaleY: 1.2,
  ease: Back.easeOut
}, 0.02);

TweenMax.set(mainContainer, {
	position: 'absolute',
  width: '100%',
  height: '100%'
});
TweenMax.set(body, {
	margin: 0,
  padding: 0
});
body.appendChild(mainContainer);