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>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>

JavaScript

var elements = document.querySelectorAll('div');
var duration = 0.6;
var timeline = new TimelineMax({ repeat: -1, yoyo: true, repeatDelay: duration });
timeline.staggerFromTo(elements, duration, {
	position: 'absolute',
  top: '50%',
  left: '50%',
  yPercent: -50,
  xPercent: -50,
  height: 100,
  width: 100,
  cycle: {
  	backgroundColor: ['#0c0', '#00c', '#0cc', '#cc0', '#c0c'],
    x: [-200, -100, 0, 100, 200]
  }
}, {
	opacity: 0,
  rotation: 90,
  x: '+=100',
  ease: Back.easeInOut
}, duration * 0.2);