JSFiddle - React, Tailwind, and code Playground

Slide in from bottom boxes http://css-tricks.com/slide-in-as-you-scroll-down-boxes/

by Jennifer Perrin

HTML

<section>
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
    <div class="module">bob</div>
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
</section>

CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
section {
    background: #eee;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    overflow: hidden;
}
.module {
    width: 48%;
    min-height: 200px;
    background: white;
    position: relative;
    float: left;
    padding: 20px;
    margin-right: 4%;
    margin-bottom: 4%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.module:nth-child(even) {
    margin-right: 0;
}
body {
    background: url(http://s.cdpn.io/3/blurry-blue.jpg);
    background-size: cover;
    padding: 30px;
}
.come-in {
    transform: translateY(150px);
    animation: come-in 0.8s ease forwards;
}
.come-in:nth-child(odd) {
    animation-duration: 0.6s;
}
.already-visible {
    transform: translateY(0);
    animation: none;
}
@keyframes come-in {
    to {
        transform: translateY(0);
    }
}

JavaScript

(function (c) {
    c.fn.visible = function (e) {
        var a = c(this),
            b = c(window),
            f = b.scrollTop();
        b = f + b.height();
        var d = a.offset().top;
        a = d + a.height();
        var g = e === true ? a : d;
        return (e === true ? d : a) <= b && g >= f
    }
})(jQuery);

// Makes use of the visible plugin
// https://raw.github.com/teamdf/jquery-visible/master/jquery.visible.min.js

var win = $(window);

var allMods = $(".module");

allMods.each(function (i, el) {
    var el = $(el);
    if (el.visible(true)) {
        el.addClass("already-visible");
    }
});

win.scroll(function (event) {

    allMods.each(function (i, el) {
        var el = $(el);
        if (el.visible(true)) {
            el.addClass("come-in");
        }
    });

});