title: Fly-in Fly-out effect on scroll jquery css animation
body: <p>I am trying to make the elements on my site fly-in and fly-out on scroll.</p>
  
  <p>This is the effect I am looking for.</p>
  
  <p><a href="http://nizoapp.com/" rel="nofollow">http://nizoapp.com/</a></p>
  
  <p>The effect in the nizo site is done with jquery, I think</p>
  
  <p>I have tried many different ways to get this effect working, with Skrollr, scrollorama, and jquery animate and with css transitions etc etc etc</p>
  
  <p>I decided to use css transitions as mad by the "css animation cheat sheet" (google it)</p>
  
  <p>After a lot of effort and some borrowed code, I have got it half working, as in, I can get the elements to fly-in on down scroll, but not to fly back out on up scroll.</p>
  
  <p>This is a jsfiddle with it half working</p>
  
  <p><a href="http://jsfiddle.net/mrcharis/Hjx3Z/4/" rel="nofollow">http://jsfiddle.net/mrcharis/Hjx3Z/4/</a></p>
  
  <p>The code is......</p>
  
  <pre><code>function isScrolledIntoView(elem) {
      var docViewTop = $(window).scrollTop();
      var docViewBottom = docViewTop + $(window).height();
      var elemTop = $(elem).offset().top;
      return ((elemTop &lt;= docViewBottom) &amp;&amp; (elemTop &gt;= docViewTop));
  }
  
  
  
  
  
  
  $(window).scroll(function () {
  
      $('.box').each(function (i) {
  
  
          if (isScrolledIntoView(this)) {
  
              $(this).addClass("slideRight");
  
          }
  
  
      });
  
  });
  
  
  
  
  // this is the function to check if is scroll down or up, but I cannot get it to trigger the fly in effect, 
  
  (function () {
      var previousScroll = 0;
  
      $(window).scroll(function () {
         var currentScroll = $(this).scrollTop();
         if (currentScroll &gt; previousScroll){
  
  // i figure to put the fly-in code here  
  
         }
         else {
  
  
  
  // and the fly-out code here     
  
  
         }
         previousScroll = currentScroll;
      });
  }());
  </code></pre>
  
  <p>I have tried using another function (code chunk) to check if the scrolling is down or up, but i can't get it working with the existing code.</p>
  
  <p>Any help to get this working would be awesome</p>
  
  <p>Have a nice day</p>
  
  <p>I will post the solution one day, if I can figure it out, sure someone else would like to know</p>