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>
<input type="text" value="0" />

JavaScript

var dimensions = 100;
var duration = 2;
var ease = Power2.easeInOut;
var myDIV = document.getElementsByTagName('div')[0];
var myInput = document.getElementsByTagName('input')[0];

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

TweenMax.set(myInput, {
	fontFamily: 'Verdana',
	fontSize: 14,
	height: 24,
	margin: 0,
  overflow: 'hidden',
  paddingLeft: 4,
  width: '100%'
});

TweenMax.fromTo(myDIV, duration, {
  backgroundColor: '#30A9DE',
	height: dimensions,
	left: '50%',
	position: 'absolute',
  top: '50%',
  width: dimensions,
  xPercent: -50,
  yPercent: -50
}, {
	callbackScope: this,
	ease: Power2.easeInOut,
  onUpdate: onUpdate,
	repeat: -1,
  repeatDelay: duration * 0.5,
	rotation: 180,
  yoyo: true
});

function onUpdate() {
	var rotation = myDIV._gsTransform.rotation;
  var rounded = Math.round(rotation * 100) / 100;
	myInput.value = 'Rotation: ' + rounded;
}