title: while scrolling animation to play only once
body: <p>while scrolling the # logo and # navigation moves. I want to let the animation play only once but, how can I best implement?</p>
  
  <pre><code>    var viewportWidth = $(window).width();
      var viewportHeight = $(window).height();
      var contentHeight = $('#content').height();
      var footerHeight = $('#footer').height();
  
  
      var newSize = viewportHeight - footerHeight + 50;
  
      var $navigation = $('#navigation');
      var $logo = $('#logo'); 
      var noRun = 0
      var $win = $(window).scroll(function() {
          $navigation.animate({
            top: newSize}, 1500, function() {
            $('#navigation .active').removeClass('active');
            $('#navigation .current').addClass('active');
  
            console.log('animation 1 finished');
  
  
            });
          $logo.animate({
            top: 100}, 1500, function() {
            console.log('animation 2 finished');
  
  
            });
      });
  </code></pre>