CodePen

HTML

            
              <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>
            
          
!

CSS

            
              * {
  @include 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%;
  &:nth-child(even) {
    margin-right: 0;
  }
  box-shadow: 0 1px 3px rgba(black, 0.2);
}

body {
  background: url(http://s.cdpn.io/3/blurry-blue.jpg);
  background-size: cover;
  padding: 30px;
}
 
.come-in {
  left: 100px;
  animation: come-in 0.8s ease forwards;
}
.already-visible {
  left: 0;
  animation: none;
}

@keyframes come-in {
  to { left: 0; }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              // 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) {
    
  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"); 
    } else {
      el.removeClass("come-in already-visible");
    }
    
  });
  
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................