title: jQuery, how to play animation when element is on screen
body: <p>Browser plays animations at the same time when it reaches the point. That's not what I want. The browser have to play every animation separated. </p>
  
  <p>This is my jQuery code: </p>
  
  <pre><code>function initScrollAnimation (){
  
      $('.slideLeft').each( function(i){
  
              var bottom_of_object = $(this).position().top + $(this).outerHeight() + $(window).height() - 500;
              var bottom_of_window = $(window).scrollTop() + $(window).height();
  
              if( bottom_of_window &gt; bottom_of_object){
                  $( ".slideLeft" ).addClass('active');
              }; //else {
                  //$( ".slideLeft" ).removeClass('active');
              //};
      }); 
  
      $('.slideRight').each( function(i){
  
              var bottom_of_object = $(this).position().top + $(this).outerHeight() + $(window).height() - 500;
              var bottom_of_window = $(window).scrollTop() + $(window).height();
  
              if( bottom_of_window &gt; bottom_of_object){
                  $( ".slideRight" ).addClass('active');
              }; //else {
                  //$( ".slideLeft" ).removeClass('active');
              //};
      }); 
  
  } 
  </code></pre>
  
  <p>And this is the css code</p>
  
  <pre><code>.slideLeft{
      margin-left:-25%;
  }
  
      .slideRight{
          margin-right:-25%;
      }
  
  .slideLeft.active{
      margin-left: 0%;
      transition: all 0.5s ease-in;
  }
  
      .slideRight.active{
          margin-right: 0%;
          transition: all 0.5s ease-in;
      }
  </code></pre>