Snipr Code Grid:
{"settings":{"resources":[],"title":""},"code":{"html":"%3Csection%3E%20%20%20%20%3Cdiv%20class%3D%22module%22%3E%3C%2Fdiv%3E%20%20%3Cdiv%20class%3D%22module%22%3E%3C%2Fdiv%3E%20%20%3Cdiv%20class%3D%22module%22%3E%3C%2Fdiv%3E%20%20%3Cdiv%20class%3D%22module%22%3E%3C%2Fdiv%3E%20%20%3Cdiv%20class%3D%22module%22%3E%3C%2Fdiv%3E%20%20%3Cdiv%20class%3D%22module%22%3E%3C%2Fdiv%3E%20%20%3Cdiv%20class%3D%22module%22%3E%3C%2Fdiv%3E%20%20%3Cdiv%20class%3D%22module%22%3E%3C%2Fdiv%3E%20%20%3Cdiv%20class%3D%22module%22%3E%3C%2Fdiv%3E%20%20%3Cdiv%20class%3D%22module%22%3E%3C%2Fdiv%3E%20%20%20%3Cdiv%20class%3D%22module%22%3E%3C%2Fdiv%3E%20%20%3Cdiv%20class%3D%22module%22%3E%3C%2Fdiv%3E%20%20%3Cdiv%20class%3D%22module%22%3E%3C%2Fdiv%3E%20%20%3Cdiv%20class%3D%22module%22%3E%3C%2Fdiv%3E%20%20%3Cdiv%20class%3D%22module%22%3E%3C%2Fdiv%3E%20%20%3Cdiv%20class%3D%22module%22%3E%3C%2Fdiv%3E%20%20%3Cdiv%20class%3D%22module%22%3E%3C%2Fdiv%3E%20%20%3Cdiv%20class%3D%22module%22%3E%3C%2Fdiv%3E%20%20%3Cdiv%20class%3D%22module%22%3E%3C%2Fdiv%3E%20%20%3Cdiv%20class%3D%22module%22%3E%3C%2Fdiv%3E%20%20%3Cdiv%20class%3D%22module%22%3E%3C%2Fdiv%3E%20%20%3Cdiv%20class%3D%22module%22%3E%3C%2Fdiv%3E%20%20%3Cdiv%20class%3D%22module%22%3E%3C%2Fdiv%3E%20%20%3Cdiv%20class%3D%22module%22%3E%3C%2Fdiv%3E%3C%2Fsection%3E","js":"(function(%24)%20%7B%0A%0A%20%20%2F**%0A%20%20%20*%20Copyright%202012%2C%20Digital%20Fusion%0A%20%20%20*%20Licensed%20under%20the%20MIT%20license.%0A%20%20%20*%20http%3A%2F%2Fteamdf.com%2Fjquery-plugins%2Flicense%2F%0A%20%20%20*%0A%20%20%20*%20%40author%20Sam%20Sehnert%0A%20%20%20*%20%40desc%20A%20small%20plugin%20that%20checks%20whether%20elements%20are%20within%0A%20%20%20*%20%20%20%20%20the%20user%20visible%20viewport%20of%20a%20web%20browser.%0A%20%20%20*%20%20%20%20%20only%20accounts%20for%20vertical%20position%2C%20not%20horizontal.%0A%20%20%20*%2F%0A%0A%20%20%24.fn.visible%20%3D%20function(partial)%20%7B%0A%20%20%20%20%0A%20%20%20%20%20%20var%20%24t%20%20%20%20%20%20%20%20%20%20%20%20%3D%20%24(this)%2C%0A%20%20%20%20%20%20%20%20%20%20%24w%20%20%20%20%20%20%20%20%20%20%20%20%3D%20%24(window)%2C%0A%20%20%20%20%20%20%20%20%20%20viewTop%20%20%20%20%20%20%20%3D%20%24w.scrollTop()%2C%0A%20%20%20%20%20%20%20%20%20%20viewBottom%20%20%20%20%3D%20viewTop%20%2B%20%24w.height()%2C%0A%20%20%20%20%20%20%20%20%20%20_top%20%20%20%20%20%20%20%20%20%20%3D%20%24t.offset().top%2C%0A%20%20%20%20%20%20%20%20%20%20_bottom%20%20%20%20%20%20%20%3D%20_top%20%2B%20%24t.height()%2C%0A%20%20%20%20%20%20%20%20%20%20compareTop%20%20%20%20%3D%20partial%20%3D%3D%3D%20true%20%3F%20_bottom%20%3A%20_top%2C%0A%20%20%20%20%20%20%20%20%20%20compareBottom%20%3D%20partial%20%3D%3D%3D%20true%20%3F%20_top%20%3A%20_bottom%3B%0A%20%20%20%20%0A%20%20%20%20return%20((compareBottom%20%3C%3D%20viewBottom)%20%26%26%20(compareTop%20%3E%3D%20viewTop))%3B%0A%0A%20%20%7D%3B%0A%20%20%20%20%0A%7D)(jQuery)%3B%0A%0Avar%20win%20%3D%20%24(window)%3B%0A%0Avar%20allMods%20%3D%20%24(%22.module%22)%3B%0A%0AallMods.each(function(i%2C%20el)%20%7B%0A%20%20var%20el%20%3D%20%24(el)%3B%0A%20%20if%20(el.visible(true))%20%7B%0A%20%20%20%20el.addClass(%22already-visible%22)%3B%20%0A%20%20%7D%20%0A%7D)%3B%0A%0Awin.scroll(function(event)%20%7B%0A%20%20%0A%20%20allMods.each(function(i%2C%20el)%20%7B%0A%20%20%20%20var%20el%20%3D%20%24(el)%3B%0A%20%20%20%20if%20(el.visible(true))%20%7B%0A%20%20%20%20%20%20el.addClass(%22come-in%22)%3B%20%0A%20%20%20%20%7D%20%0A%20%20%7D)%3B%0A%20%20%0A%7D)%3B","css":"*%20%7B%0A%20%20-moz-box-sizing%3A%20border-box%3B%0A%20%20-webkit-box-sizing%3A%20border-box%3B%0A%20%20box-sizing%3A%20border-box%3B%0A%7D%0A%0Asection%20%7B%0A%20%20background%3A%20%23eee%3B%0A%20%20max-width%3A%20600px%3B%0A%20%20margin%3A%200%20auto%3B%0A%20%20padding%3A%2020px%3B%0A%20%20overflow%3A%20hidden%3B%0A%7D%0A%0A.module%20%7B%0A%20%20width%3A%2048%25%3B%0A%20%20min-height%3A%20200px%3B%0A%20%20background%3A%20white%3B%0A%20%20position%3A%20relative%3B%0A%20%20float%3A%20left%3B%0A%20%20padding%3A%2020px%3B%0A%20%20margin-right%3A%204%25%3B%0A%20%20margin-bottom%3A%204%25%3B%0A%20%20box-shadow%3A%200%201px%203px%20rgba(0%2C%200%2C%200%2C%200.2)%3B%0A%7D%0A.module%3Anth-child(even)%20%7B%0A%20%20margin-right%3A%200%3B%0A%7D%0A%0Abody%20%7B%0A%20%20background%3A%20url(https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fs.cdpn.io%2F3%2Fblurry-blue.jpg)%3B%0A%20%20background-size%3A%20cover%3B%0A%20%20padding%3A%2030px%3B%0A%7D%0A%0A.come-in%20%7B%0A%20%20transform%3A%20translateY(150px)%3B%0A%20%20animation%3A%20come-in%200.8s%20ease%20forwards%3B%0A%7D%0A%0A.come-in%3Anth-child(odd)%20%7B%0A%20%20animation-duration%3A%200.6s%3B%0A%7D%0A%0A.already-visible%20%7B%0A%20%20transform%3A%20translateY(0)%3B%0A%20%20animation%3A%20none%3B%0A%7D%0A%0A%40keyframes%20come-in%20%7B%0A%20%20to%20%7B%0A%20%20%20%20transform%3A%20translateY(0)%3B%0A%20%20%7D%0A%7D"}}
<section>    <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>  <div class="module"></div>  <div class="module"></div>  <div class="module"></div>  <div class="module"></div></section>
(function($) {

  /**
   * Copyright 2012, Digital Fusion
   * Licensed under the MIT license.
   * http://teamdf.com/jquery-plugins/license/
   *
   * @author Sam Sehnert
   * @desc A small plugin that checks whether elements are within
   *     the user visible viewport of a web browser.
   *     only accounts for vertical position, not horizontal.
   */

  $.fn.visible = function(partial) {
    
      var $t            = $(this),
          $w            = $(window),
          viewTop       = $w.scrollTop(),
          viewBottom    = viewTop + $w.height(),
          _top          = $t.offset().top,
          _bottom       = _top + $t.height(),
          compareTop    = partial === true ? _bottom : _top,
          compareBottom = partial === true ? _top : _bottom;
    
    return ((compareBottom <= viewBottom) && (compareTop >= viewTop));

  };
    
})(jQuery);

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"); 
    } 
  });
  
});
* {
  -moz-box-sizing: border-box;
  -webkit-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(https://s3-us-west-2.amazonaws.com/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);
  }
}