Elements fade in as user scrolls down, how to also add animation

I have this code that kind of does what i want, as the user scrolls down the page, the content fades into view, that works well. But I wanted each div to be animated as they came into view. Problem is the animation happens all at once and just once, not as the elements fadeIn. Is there a way to fix this?

JSFiddle: https://jsfiddle.net/3ox0hn8w/

HTML

<body>

<div class="headerWrap">
  <h1> A scrolling fade in test</h1>
</div>  <!--headerWrap-->

<div class="fadeInsWrap">

<div class="fadeInBlockLeft left">
  <h1> Fade in </h1>
</div>

<div class="fadeInBlockRight right">
  <h1> Fade in </h1>
</div>

<div class="fadeInBlockLeft left">
  <h1> Fade in </h1>
</div>

<div class="fadeInBlockRight right">
  <h1> Fade in </h1>
</div>

<div class="fadeInBlockLeft left">
  <h1> Fade in </h1>
</div>

<div class="fadeInBlockRight right">
  <h1> Fade in </h1>
</div>

<div class="fadeInBlockLeft left">
  <h1> Fade in </h1>
</div>


 </div> <!--fadeInsWrap-->
</body>

CSS

    body {
  height: 700px;
}

.headerWrap {
  text-align: center;
  margin-top: 5%;
}

.fadeInsWrap {
  width: 50%;
  height: 1000px;
  margin: 0 auto;
  border: 1px solid;
  padding-top: 5%;
}

.left {
  border: 1px solid;
  width: 50%;
  text-align: center;
  clear: both;
}

.right {
  width: 50%;
  float: right;
  border: 1px solid;
  text-align: center;
}

.fadeInBlockLeft,
.fadeInBlockRight {
  opacity: 0;
  margin-bottom: 7%;
}

.animate-inLeft {
  -webkit-animation: inLeft 600ms ease-in-out forwards;
  display: block;
}

@-webkit-keyframes inLeft {
  0% {
    -webkit-transform: translateX(900px);
  }
  100% {
    -webkit-transform: translateX(0px);
  }
}

.animate-inRight {
  -webkit-animation: inRight 600ms ease-in-out forwards;
  display: block;
}

@-webkit-keyframes inRight {
  0% {
    -webkit-transform: translateX(-900px);
  }
  100% {
    -webkit-transform: translateX(0px);
  }
}

JQuery

  $(document).ready(function(){

    $(window).scroll( function(){

       $(".fadeInBlockLeft, .fadeInBlockRight").each( function(i){
            var bottom_of_object = $(this).position().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();

             bottom_of_window = bottom_of_window + 50;  

            if( bottom_of_window > bottom_of_object ){

                $(this).animate({'opacity':'1'},1000);
                 $('.fadeInBlockLeft').addClass("animate-inLeft");
                 $('.fadeInBlockRight').addClass("animate-inRight");
            }
         }); 
       });
     });

Solution

I modified your fiddle. I think what I have is what you are looking for? Basically, you only want to fade in "this" element. Your code above does the animation for every element that has the class "fadeInBlockLeft" or "fadeInBlockRight".

$(document).ready(function(){
   
    $(window).scroll( function(){
    
       $(".fadeInBlockLeft, .fadeInBlockRight").each( function(i){
            var bottom_of_object = $(this).position().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();
            
    
            bottom_of_window = bottom_of_window + 50;  
          
            if( bottom_of_window > bottom_of_object ){
               
                $(this).animate({'opacity':'1'},1000);
                if($(this).hasClass('fadeInBlockLeft')){
                	$(this).addClass("animate-inLeft");
                }
                if($(this).hasClass('fadeInBlockRight')){
                	$(this).addClass("animate-inRight");
                }
            }
         }); 
       });
     });