JSFiddle - React, Tailwind, and code Playground

by Ian Roberts

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<div class="faded">Div 1</div>
<div class="faded">Div 2</div>
<div class="faded">Div 3</div>
<div class="faded">Div 4</div>
<div class="faded">Div 5</div>
<div class="faded">Div 6</div>
<div class="faded">Div 7</div>

CSS

.faded { border: solid 1px #ddd; background: #eee; position:relative; }

JavaScript

//fade in sequentially & animate, slide right during fade
$("div").each(function(delay) {
    $(this).css('display', 'block').animate({ opacity: 0 }, 0).delay(delay * 100).animate({ opacity: 1, "left": "+=50px" }, 400, "easeOutExpo" );
});
//add diff easing properties to make it more swift

//for clear use of easing/instructs - http://easings.net/
//for easing cdn - http://cdnjs.com/