JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<div class="flip-me">test</div>
<div class="flip-me">test</div>
<div class="flip-me">test</div>
<div class="flip-me">test</div>
<div class="flip-me">test</div>
JavaScript
TweenMax.set(document.body, { margin: 0, padding: 0, overflow: 'hidden' });
TweenMax.staggerFromTo('.flip-me', 200, {
position: 'absolute',
top: '50%',
left: '50%',
yPercent: -50,
xPercent: -50,
width: 100,
height: 100,
textAlign: 'center',
rotationX: 90,
transformOrigin: 'top center',
transformPerspective: 400,
backfaceVisibility: 'hidden',
cycle: {
backgroundColor: ['#c00', '#0c0']
}
}, {
repeat: -1,
yoyo: true,
rotationX: 0,
ease: Power2.easeInOut
}, 0.1);