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="fixed-wrapper">
<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 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 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 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 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 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 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 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 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 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 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 1</div>
<div class="faded">Div...

CSS

/*clear every 5 to keep from displaying 6th attempting to float left*/
.clear{clear:both;}
/*fixed width layouts*/
.fixed-wrapper{width:385px;padding:25px;margin:0px auto;}
/*here you set starting positions, in js you set final positions*/ 
.faded { border: solid 1px #ddd; background: #eee; position:relative; right:-100px; width:50px; height:50px;float:left; }

JavaScript

//FIXED WIDTH fade in sequentially & animate, slide LEFT during fade, set width, float left clear added as class to every 5th element BOUNCE!
$(".faded").each(function(delay) {
    $(this).css('display', 'block').animate({ opacity: 0 }, 0).delay(delay * 200).animate({ opacity: 1, "right": "+=100px", "width": "+=25px", "height": "+=25px" }, 2500, "easeOutBounce" );
    //adds class to make sure every 5th element clears, avoids having ghosted animations form elements thingking they can fit on the same line
    $(".faded:nth-child(5n+1)").addClass("clear");
    
});
//add diff easing properties to make it more swift

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