JSFiddle - React, Tailwind, and code Playground

inspiration: https://tympanus.net/Development/BlockRevealers/

by Tahir Ahmed

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<div class="first">&nbsp;</div>
<div class="second">&nbsp;</div>
<div class="item0">HELLO</div>
<div class="item1">WORLD!</div>

JavaScript

var first = document.getElementsByClassName('first')[0];
var second = document.getElementsByClassName('second')[0];
var item0 = document.getElementsByClassName('item0')[0];
var item1 = document.getElementsByClassName('item1')[0];

TweenMax.set([first, second], {
	backgroundColor: '#000',
	height: '100%',
	left: 0,
	position: 'absolute',
  top: '50%',
  width: 0,
  yPercent: -50
});

TweenMax.set(first, { backgroundColor: '#E53A40' });
TweenMax.set(second, { backgroundColor: '#30A9DE' });

TweenMax.set([item0, item1], {
	color: '#000',
  fontFamily: 'Verdana',
  fontSize: 40,
  marginTop: 100
});

var duration = 0.6;
var width = '40%';
var timeline = new TimelineMax({ repeat: -1, repeatDelay: duration });

timeline.to(first, duration, {
	width: width,
  ease: Power2.easeOut
}, duration);
timeline.to(second, duration, {
	width: width,
  ease: Power2.easeInOut
});
///*
timeline.set([item0, item1], {
	autoAlpha: 0
});
timeline.to([first, second], duration, {
  xPercent: -100,
  ease: Power2.easeInOut
});
//*/