JSFiddle - React, Tailwind, and code Playground

by geekambassador

HTML

<script src="http://www.snorkl.tv/dev/libs/greensock/TweenMax.min.js"></script>
<script src="http://www.snorkl.tv/dev/libs/greensock/plugins/ColorPropsPlugin.min.js"></script>
<p class="intro">this happens first</p>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

CSS

.intro{
 position:relative;    
 color:white;
}

.box{
  position:relative;
  background-color:green;
  width:50px;
  height:50px; 
  margin-top:10px;
}


body{
background-color:black;

}

JavaScript

var tl = new TimelineLite({delay:.5});
tl.to($('.intro'), 1, {css:{left:200}})
   .staggerFromTo($('.box'), 1, {css:{alpha:0}}, {css:{alpha: 1}, immediateRender: true}, .2 )