JSFiddle - React, Tailwind, and code Playground

by geekambassador

HTML

<script src="http://www.greensock.com/js/src/TweenMax.min.js"></script>
<div id="boxWrapper">
    <div class="box">T</div>
    <div class="box">H</div>
    <div class="box">I</div>
    <div class="box">S</div><br/>
    <div class="box">R</div>
    <div class="box">U</div>
    <div class="box">L</div>
    <div class="box">E</div>
    <div class="box">S</div>
</div>

CSS

#boxWrapper{
width:700px;
height:300px;
}

.box{
    width:80px;
    height:80px;
    background-color:black;
    margin:10px;
    display:inline-block;
    font-size:60px;
    line-height:80px;
    color:white;
    text-align:center;
}

JavaScript

CSSPlugin.defaultTransformPerspective = 400;
TweenMax.staggerFrom($(".box"), 1.5, {css:{autoAlpha:0}}, .3);
TweenMax.staggerFrom($(".box"), 1.5, {css:{rotationX:100}, ease:Elastic.easeOut, easeParams:[1.2, .8]}, .3);