JSFiddle - React, Tailwind, and code Playground

Velocity.js cards and boxes http://codepen.io/tommiehansen/pen/JKiBG

by Jennifer Perrin

HTML

<script src="http://cdn.jsdelivr.net/velocity/1.1.0/velocity.min.js"></script>
<script src="http://cdn.jsdelivr.net/velocity/1.1.0/velocity.ui.min.js"></script>
<script src="http://fonts.googleapis.com/css?family=Open+Sans"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<h1>Velocity.js <i>cards and boxes</i></h1>

<pre>Test of animation performance etc <i class="fa fa-question-circle" title="4 first runs animation X, others run animation Y etc. Purely a test for demo purposes.&#10;Please note that CodePen has a negative impact on performance."></i></pre>

<div id="a"><i class="fa fa-plus">&nbsp; ADD 10 BOXES</i>
</div>
<div id="load">
    <img src="http://preloaders.net/preloaders/496/Flip%20Flop.gif">
    <br>2 second fake load</div>
<div id="boxes">
    <div class="box">
        <img class="full" width="300" height="200" src="http://placeimg.com/20/20/animals/1//1/">
        <div class="boxInner">
             <h2>Cats are animals</h2>

            <p class="intro">It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
        <div class="boxFoot">
            <!-- let's complexify things -->
            <div><i class="fa fa-clock-o"></i> 2 days ago <em>by</em> Evil Human</em>
            </div>
            <div class="right"><span><i class="fa fa-heart"></i> 12</span>  <span><i class="fa fa-thumbs-down" title=""></i> 3</span>
            </div>
        </div>
    </div>
    <div class="box">
        <img class="full" width="300" height="200" src="http://placeimg.com/20/20/animals/1/">
        <div class="boxInner">
             <h2>Humans are not cats</h2>

            <p class="intro">When an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but...

CSS

/* + Reset.css */
/* + Open Sans @ Google Fonts */
/* + FontAwesome */

/* --------------------------------------
NOTE: Only @ Chrome, others may fail
--------------------------------------*/

/* defualts */
html,body { min-height:100%; }
body { font-family:"Open Sans", helvetica,arial,sans-serif; font-size:13px; line-height: 160%; font-weight: 300; color: #444; background: #eee; }
*,*:before,*:after { box-sizing: border-box; } img { display:block; } i { font-style:normal; } em { font-style:italic; }

/* Refresh, add boxes etc */
#a { position:absolute; top:20px; right:20px; display: block; background: #eee; color:#aaa; -webkit-user-select: none; user-select: none; } #a i { cursor: pointer; font-size:11px; padding:8px 10px; border:1px dotted #ccc; transition:all .12s; margin-left:-1px; }
#a .fa { font-family: "FontAwesome", "Open Sans", sans-serif; } #a i:hover { color: #fff; background: hotpink; border:1px solid hotpink; }
#a .fa:last-child { background:#d00; border-color:#d00; color:#fff; }
#a .fa:last-child:hover { background: #a00; border-color: #a00; }

pre i { cursor:help; display:inline-block; margin: 0 0 0 3px; }
pre i:hover { color:#222; }

/* ----- end defaults ---- */

/* START OPACITY */
.box, #load { opacity:0; }
#boxes, .box, #load { transform: translate3d(0,0,0); } /* reomves larger paints */

/* Loader (fake) */
#load { text-align:center; z-index:10; background:#eee; position:absolute; top:50%; left:50%; height:60px; width:120px; overflow:hidden; margin-left:-60px; margin-top:-30px; font-size:11px; text-transform:uppercase; color:#aaa; }
#load img { display:inline-block; text-align:center; }

/* Main layout */
#boxes, h1, pre { width: 660px; margin: 40px auto; text-align:center; position: relative; }
pre { display:block; margin-top:-25px; text-transform: uppercase; color:#aaa; font-size:11px; letter-spacing:.5px; }
/* #boxes, h1 { width: 1340px; } /* 4x width */

/* Headers */
h1,h2 { font-size: 21px; line-height:100%; font-weight:300; }
h1 {...

JavaScript

/* + jquery.js */
/* + velocity.js */
/* + velocity.ui.js */

// flickUpIN
$.Velocity.RegisterUI("transition.flickUpIn", {
    defaultDuration: 500,
	calls: [ 
		[ { opacity: [1, 0], translateY: [0, 100], rotateZ: [0, 3], translateZ: 0 } ]
	]
});

// moveIn
$.Velocity.RegisterUI("transition.moveIn", {
    defaultDuration: 500,
	calls: [ 
		[ { opacity: [1, 0], translateY: [0, 50], translateZ: 0 } ]
	]
});

// Selections
var boxes = $('#boxes');
var box = boxes.find('.box');
var loader = $('#load'); // needs to get 'truly' hidden due to animated gif, else PERF-lag (don't use display:false on it)
var boxFirst = box.slice(0,10);

// Set defaults
var aniDuration = 500; // animation duration
var aniStag = 120; // stag X ms
var loaderDelay = 2000; // fake loader duration
var firstNum = 4; // do specific animation with 4 first boxes (often heavier ones)
var Firsts = box.slice(0,firstNum); // set it
var Lasts = box.slice(firstNum);   // do less heavy animations on all above var firstNum

// FlyIn velocity transition
function flyIn(e,inOut,wait){
	//var animIn = 'transition.slideUp' + 'In';
	var animIn = 'transition.move' + 'In';
	var animLight = 'fadeIn';
	var animOut = 'transition.slideRight' + 'Out';

	if(inOut=='in'){
		e.delay(wait).velocity(animIn, { stagger: aniStag, duration: aniDuration, display: false, ease: 'easeOutSine' });
	}
	else if(inOut=='lightIn') {
		e.delay(wait).velocity(animLight, { duration: aniDuration, display: false });
	}
	else {
		e.delay(wait).velocity(animOut, { stagger: aniStag, duration: aniDuration, display: false });
	}
}

// INIT + FAKE LOADER
function init(isClick){ // for use with "RE-RUN ANIM" button
  if(isClick) {
    box = boxes.find('.box'); // need to re-select boxes if boxes has been added
    box.css('opacity',0);
    init();
  }
  else {
    // Run loading graphic
    loader.delay(100).velocity("transition.slideDownIn", { duration: 500 });
    // Hide loading graphic + run fuction go() when complete
   ...