JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>
<div class="some-class-name"></div>
<div class="some-class-name"></div>
<div class="some-class-name"></div>
<div class="some-class-name"></div>
<div class="some-class-name"></div>
<div class="some-class-name"></div>
<div class="some-class-name"></div>
<div class="some-class-name"></div>
<div class="some-class-name"></div>
CSS
html, body { margin: 0; padding: 0; }
.some-class-name {
position: relative;
float: left;
width: 50px;
height: 50px;
background: #0cc;
}
.animation-class {
background: #cc0;
top: 50px;
transform: rotate(90deg);
}
JavaScript
var duration = 0.5;
var stagger = 0.5;
var someClassName = '.some-class-name';
var animationClass = 'animation-class';
TweenMax.staggerTo(someClassName, duration, {className: '=' + animationClass, transformOrigin: 'bottom right', ease: Power4.easeOut}, stagger);