How to get Smooth Slide In (as we scroll down) Boxes?

I was playing with my new Nexus 7 (I really wanted to own a real Android device) and I noticed a neat little effect in the Google+ app that comes with it. As you swipe down, new modules of content slide up into place. Video is best here:

HTML

  1. <section>
  2. <div class="module"></div>
  3. <div class="module"></div>
  4. <div class="module"></div>
  5. <div class="module"></div>
  6. <div class="module"></div>
  7. <div class="module"></div>
  8. <div class="module"></div>
  9. <div class="module"></div>
  10. <div class="module"></div>
  11. <div class="module"></div>
  12. <div class="module"></div>
  13. <div class="module"></div>
  14. <div class="module"></div>
  15. <div class="module"></div>
  16. <div class="module"></div>
  17. <div class="module"></div>
  18. <div class="module"></div>
  19. <div class="module"></div>
  20. <div class="module"></div>
  21. <div class="module"></div>
  22. <div class="module"></div>
  23. <div class="module"></div>
  24. <div class="module"></div>
  25. <div class="module"></div>
  26. </section>

CSS

  1. * {
  2. @include box-sizing(border-box);
  3. }
  4. section {
  5. background: #eee;
  6. max-width: 600px;
  7. margin: 0 auto;
  8. padding: 20px;
  9. overflow: hidden;
  10. }
  11. .module {
  12. width: 48%;
  13. min-height: 200px;
  14. background: white;
  15. position: relative;
  16. float: left;
  17. padding: 20px;
  18. margin-right: 4%;
  19. margin-bottom: 4%;
  20. &:nth-child(even) {
  21. margin-right: 0;
  22. }
  23. box-shadow: 0 1px 3px rgba(black, 0.2);
  24. }
  25. body {
  26. background: url(http://s.cdpn.io/3/blurry-blue.jpg);
  27. background-size: cover;
  28. padding: 30px;
  29. }
  30. .come-in {
  31. transform: translateY(150px);
  32. animation: come-in 0.8s ease forwards;
  33. }
  34. .come-in:nth-child(odd) {
  35. animation-duration: 0.6s;
  36. }
  37. .already-visible {
  38. transform: translateY(0);
  39. animation: none;
  40. }
  41. @keyframes come-in {
  42. to { transform: translateY(0); }
  43. }

JS

  1. // Makes use of the visible plugin
  2. // https://raw.github.com/teamdf/jquery-visible/master/jquery.visible.min.js
  3. var win = $(window);
  4. var allMods = $(".module");
  5. allMods.each(function(i, el) {
  6. var el = $(el);
  7. if (el.visible(true)) {
  8. el.addClass("already-visible");
  9. }
  10. });
  11. win.scroll(function(event) {
  12. allMods.each(function(i, el) {
  13. var el = $(el);
  14. if (el.visible(true)) {
  15. el.addClass("come-in");
  16. }
  17. });
  18. });