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>

JavaScript

var element0 = document.createElement('div');
var element1 = document.createElement('div');
var body = document.body;
var duration = 0.6;
var dimensions = 200;
var transformPerspective = dimensions * 2;
var ease = Power2.easeInOut;

TweenMax.set(body, { backgroundColor: '#999', margin: 0, overflow: 'hidden', padding: 0 });
TweenMax.set([element0, element1], {
	backgroundColor: '#fff',
	height: dimensions,
	left: '50%',
	position: 'absolute',
  top: '50%',
  transformOrigin: '50% 50% -' + dimensions * 0.5,
  transformPerspective: transformPerspective,
  width: dimensions,
  xPercent: -50,
  yPercent: -50
});
TweenMax.set(element0, {
	zIndex: 1
});
TweenMax.set(element1, {
	backgroundColor: '#222',
	rotationY: -90,
  zIndex: 0
});

var tween0 = TweenMax.to(element0, duration, {
	backgroundColor: '#222',
  callbackScope: this,
	delay: duration,
  ease: ease,
  repeat: -1,
  repeatDelay: duration,
	rotationY: 90,
  onUpdate: onUpdateTween0,
  yoyo: true
});

var tween1 = TweenMax.to(element1, duration, {
	backgroundColor: '#fff',
  callbackScope: this,
	delay: duration,
  ease: ease,
  repeat: -1,
  repeatDelay: duration,
	rotationY: 0,
  onUpdate: onUpdateTween1,
  yoyo: true
});

function onUpdateTween0() {
  if (tween0.target._gsTransform.rotationY >= 45 && element0.style.zIndex != 0) {
  	TweenMax.set(element0, { zIndex: 0 });
  } else if (tween0.target._gsTransform.rotationY < 45 && element0.style.zIndex != 1) {
  	TweenMax.set(element0, { zIndex: 1 });
  }
}

function onUpdateTween1() {
	if (tween1.target._gsTransform.rotationY <= 45 && element1.style.zIndex != 1) {
  	TweenMax.set(element1, { zIndex: 1 });
  } else if (tween1.target._gsTransform.rotationY > 45 && element1.style.zIndex != 0) {
  	TweenMax.set(element1, { zIndex: 0 });
  }
}

body.appendChild(element1);
body.appendChild(element0);