JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<div class="container">
  <div class="top">&nbsp;</div>
  <div class="right">&nbsp;</div>
  <div class="bottom">&nbsp;</div>
  <div class="left">&nbsp;</div>
</div>

JavaScript

var container = document.querySelector('.container');
var top = document.querySelector('.top');
var right = document.querySelector('.right');
var bottom = document.querySelector('.bottom');
var left = document.querySelector('.left');

TweenMax.set(container, {
	position: 'absolute',
  top: '50%',
  left: '50%',
  yPercent: -50,
  xPercent: -50
});

TweenMax.set([top, right, bottom, left], {
	position: 'absolute',
  top: '50%',
  left: '50%',
  yPercent: -50,
  xPercent: -50,
  width: 50,
  height: 50,
  borderRadius: 50
});

TweenMax.set(top, {
	y: -50,
  backgroundColor: '#f00'
});

TweenMax.set(right, {
  x: 50,
  backgroundColor: '#0f0'
});

TweenMax.set(bottom, {
	y: 50,
  backgroundColor: '#00f'
});

TweenMax.set(left, {
	x: -50,
  backgroundColor: '#000'
});

var timeline = new TimelineMax({ paused: true, repeat: -1 });
var animDuration = 1.2;

timeline.to(top, animDuration, { y: 0, repeat: 1, yoyo: true, ease: animEase });
timeline.to(right, animDuration, { x: 0, repeat: 1, yoyo: true, ease: animEase });
timeline.to(bottom, animDuration, { y: 0, repeat: 1, yoyo: true, ease: animEase });
timeline.to(left, animDuration, { x: 0, repeat: 1, yoyo: true, ease: animEase });
timeline.to(container, animDuration * 8, { rotation: 360, ease: Power0.easeNone}, 0);

timeline.play();