Out of view content not hiding

The content not in the viewport is not being hidden

by wazaraki

HTML

<script src="//code.jquery.com/jquery-1.7.0.min.js"></script>
<body class="homepage">
  <main id="main" class="main" role="main" tabindex="-1">
    <div class="main-3">
      <article class="post flipInX animated" data-delay=".2">
        <h1 class="h-1">Service 1</h1>
        <div class="entry">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum, lectus id sollicitudin mattis, quam tortor lobortis orci, sed iaculis mi nulla non ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames
          ac turpis egestas. Donec non felis mollis, congue neque eu, rhoncus libero. Nunc ut mattis ante.</div>
      </article>
      <article class="post flipInX animated" data-delay=".4">
        <h1 class="h-1">Service 2</h1>
        <div class="entry">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum, lectus id sollicitudin mattis, quam tortor lobortis orci, sed iaculis mi nulla non ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames
          ac turpis egestas. Donec non felis mollis, congue neque eu, rhoncus libero. Nunc ut mattis ante.</div>
      </article>
      <article class="post flipInX animated" data-delay=".6">
        <h1 class="h-1">Service 3</h1>
        <div class="entry">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum, lectus id sollicitudin mattis, quam tortor lobortis orci, sed iaculis mi nulla non ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames
          ac turpis egestas. Donec non felis mollis, congue neque eu, rhoncus libero. Nunc ut mattis ante.</div>
      </article>
      <article class="post flipInX animated" data-delay=".8">
        <h1 class="h-1">Service 4</h1>
        <div class="entry">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum, lectus id sollicitudin mattis, quam tortor lobortis orci, sed iaculis mi nulla non ipsum. Pellentesque habitant morbi...

CSS

* {
  border: 0;
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
  -webkit-border-radius: 0;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

/** this class doesn't really do anything, just used it for
    marking invisible elements. You could use data
    attributes instead, for example */
.hidden {}

.main {
  position: relative;
  display: inline-block;
  height: auto;
  width: 98%;
  margin: 40px auto 0 auto;
  text-align: left;
}

.main-3 {
  min-height: 400px;
  font-size: 16px;
  line-height: 24px;
}

[class|=h] {
  margin-bottom: 42px;
  font-size: 30px;
  font-weight: normal;
  line-height: 1;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  /** once the animation finishes we stay on the last
      keyframe */
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    opacity: 1;
  }
}

@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function:...

JavaScript

$(function() {
  /** Reccomended technique for detecting visible elements 
      take from http://stackoverflow.com/a/7557433/4405615 
      Removed width detection since we only need the heights */
  function isScrolledIntoView (el) {

    //special bonus for those using jQuery
    if (typeof jQuery === "function" && el instanceof jQuery) {
        el = el[0];
    }

    var rect = el.getBoundingClientRect();

    return (
        rect.top >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) /*or $(window).height() */
    );
}
/* Not longer needed as we now assign delays dinamically on scroll (see below) */
/*  $('.post').each(function(index) {
    var delay = $(this).data('delay');
    if (typeof delay !== typeof undefined && delay !== false) {
      //$(this).css('animation-delay', delay + 's');
      //$(this).css('-webkit-animation-delay', delay + 's');
    }
  });*/
  
  var delay = 0;
  $('.post').each(function() {
    var post = $(this);
    if (isScrolledIntoView(post)) {
      /* start animation for visible elements 
         see the CSS for more info */
      post.css({
          '-webkit-animation-delay': delay + 's',
        	'animation-delay': delay + 's',
        	'webkit-animation-play-state': 'running',
        	'animation-play-state': 'running'
         });
      delay += 0.2;
    } else {
      post.addClass('hidden');
    }
  });
  $(document).on('scroll', function() {
    /** every round starts with 0s delay so following scrolls 
        can start animating immediately */
    var delay = 0;
    $('.post.hidden').each(function() {
      if (isScrolledIntoView(this)) {
        $(this).removeClass('hidden').css({
          '-webkit-animation-delay': delay + 's',
        	'animation-delay': delay + 's',
        	'webkit-animation-play-state': 'running',
        	'animation-play-state': 'running'
         });
        delay += 0.2;
      }
    });
  });
});