title: How to hide items in the correct sequence? , Using waypoint, TweenMax, jquery
body: <p>I'm collapsando the header when I scroll the browser window, I'm using waypoints to trigger a function when passing a certain limit.</p>
  
  <p>My problem is how to do that, for example, when I scroll down first disappear content (form inputs) and then change the height of the header, and then when I scroll up first increase height and then display the contents (form inputs) .</p>
  
  <p>How do you could do?</p>
  
  <p>I have a example here: <a href="http://jsfiddle.net/Gonzalo2683/fz46ray5/3/" rel="nofollow">fiddle</a></p>
  
  <p>JS:</p>
  
  <pre><code>$(document).ready(init);
  
  function init(){
  
      var header, pageContainer, pageContent, brandImage;
  
      header = $('header');
      pageContainer = $('#page-container');
      pageContent = $('#page-content');
      brandImage = $('.brand img');
  
      //functions
      collapseHaeder();
  
  
      function collapseHaeder(){
          if(pageContainer.hasClass('collapse-header')){
              var waypoint = new Waypoint({
                  element: document.getElementById('page-content'),
                  handler: function(direction) {
  
                      var elementsToResize = $('header, .brand-holder, .header-content');
                      var hideElms = $('.hide-element');
  
                      if(direction == 'up'){
                          hideElements(hideElms);
                          resizeHeader(elementsToResize);
                      }else {
                          resizeHeader(elementsToResize);
                          hideElements(hideElms);
                      }
                  }
              });
  
          }
      }
  
  
      function resizeHeader(elemts){
          var newHeight = 45;
          var brandHeight = newHeight - 10;
          var easingEffect = 'Quart.easeInOut';
  
          if(!elemts.hasClass('resized')){
              elemts.addClass('resized');
  
          }else {
              elemts.removeClass('resized');
              newHeight = 140;
              brandHeight = newHeight / 2;
          }
          //header elements  containers
          TweenMax.to(elemts, 1, {height:newHeight, ease: easingEffect});
          //page container padding
          TweenMax.to(pageContainer, 1, {paddingTop:newHeight, ease: easingEffect});
          //brand image
          TweenMax.to(brandImage, 1, {height:brandHeight, ease: easingEffect});
      }
  
      function hideElements(hiddenElement){
          var classHidded = 'has-hided';
          if(!hiddenElement.hasClass(classHidded)){
              hiddenElement.addClass(classHidded);
              hiddenElement.fadeOut(800);
          }else {
              hiddenElement.fadeIn(500);
              hiddenElement.removeClass(classHidded);
          }
      }
  
  
  }
  </code></pre>