JSFiddle - React, Tailwind, and code Playground

by Tahir Ahmed

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>

JavaScript

var dimensions = 100;
var dimensionsHalf = dimensions * 0.5;
var duration = 1.4;
var windowWidthHalf = -window.innerWidth * 0.5;
var windowHeightHalf = -window.innerHeight * 0.5;
var points = [{
	x: windowWidthHalf + dimensionsHalf,
	y: windowHeightHalf + dimensionsHalf
}, {
	x: -windowWidthHalf - dimensionsHalf,
	y: windowHeightHalf + dimensionsHalf
}, {
	x: windowWidthHalf + dimensionsHalf,
	y: -windowHeightHalf - dimensionsHalf
}, {
	x: -windowWidthHalf - dimensionsHalf,
	y: -windowHeightHalf - dimensionsHalf
}];
var ease = Power2.easeInOut;
var myDIVs = document.getElementsByTagName('div');
var length = myDIVs.length;

TweenMax.set(document.body, {
	backgroundColor: '#E0E3DA',
	margin: 0,
  overflow: 'hidden',
  padding: 0
});

TweenMax.staggerTo(myDIVs, 0, {
	cycle: {
  	backgroundColor: function(index) {
    	return ['#30A9DE', '#E53A40', '#A593E0', '#2EC4B6'][index % 4]
    }
  },
	height: dimensions,
	left: '50%',
	position: 'absolute',
  top: '50%',
  width: dimensions,
  xPercent: -50,
  yPercent: -50
});

var timelines = [];
var timeline = null;

for (var i = 0; i < length; i += 1) {
	timeline = new TimelineMax({
  	paused: true,
  	repeat: -1,
    yoyo: true
  });
  timeline.to(myDIVs[i], duration, {
  	x: points[i].x,
    y: points[i].y,
    rotation: 90,
    ease: ease
  });
  timelines[i] = timeline;
  
  myDIVs[i].addEventListener('click', onClick, false);
}

function assignTickListener() {
	TweenMax.ticker.addEventListener('tick', onTick, this, true, 1);
}

function removeTickListener() {
	TweenMax.ticker.removeEventListener('tick', onTick);
}

function onTick() {
	for (var i = 0; i < length; i += 1) {
  	console.log(timelines[i].isActive());
  }
}

function onClick() {
	for (var i = 0; i < length; i += 1) {
  	if (timelines[i].paused()) {
    	timelines[i].resume();
    } else {
    	timelines[i].pause();
    }
  }
}

//assignTickListener();