filter code

 //SORTS ITEMS USING ANIMATION LIBRARY
 
$(window).load(function() {
  var box = $('.box'),
      boxContainer = $('.boxes'),
      section = $('.sort-section'),
      containerHeight = $('.adjustable-height'),
      boxClassFilter,
      showThese;
      
      //option 1
     $('.special-gp-nav').on('click change', function(e){ 
     e.preventDefault();

    var target = $( e.target );
      if ( target.is('a') ) {
        boxClassFilter = target.attr('data-filter');
        console.log(boxClassFilter);
        $('#desktop-nav').find('a.active').removeClass('active');
        $(target).toggleClass('active');
     }
      else if (target.is('select')) {
        $('body').off('click', '.special-gp-nav');
        boxClassFilter = $('select option:selected').attr('data-filter');
    }
     showThese = boxContainer.find('.box' + '.' + boxClassFilter);
     sortItems();
   });
   
 
    //option2  
    $('a.filter').on('click', function(e){  
      e.preventDefault();
        boxClassFilter = $(this).attr('data-filter');
        showThese = boxContainer.find('.box' + '.' + boxClassFilter);
        $('#desktop-nav').find('a.active').removeClass('active');
        $(this).toggleClass('active');
        sortItems();
    });
    
    $('#mobile-nav').on('click', function(e) {
        e.preventDefault();
      boxClassFilter = $('select option:selected').attr('data-filter');
      showThese = boxContainer.find('.box' + '.' + boxClassFilter);
      sortItems();
    });
      
  function sortItems(){
    var sectionHeight = $('body').height();
    var tl = new TimelineLite()
    .to(box, 0.5, {scale:0, opacity:0, ease: Power3.easeOut})
    .set(box, {display:'none'})
    .set(showThese, {display:'block'})
    .to(showThese, 0.8, {scale:1, opacity:1, ease: Power3.easeOut}, '+=0.1')
    .fromTo(section, 1, {height:'sectionHeight', ease: Power3.easeOut},  {height:'initial', ease: Power3.easeIn}, '-=1');
    
    if (boxClassFilter == 'all') {    
        var allTL = new TimelineLite()
            .set(section, {height:sectionHeight})
            .to(box, 0.5, {scale:0, opacity:0, ease: Power3.easeOut})
            .set(box, {display:'none'})
            .set(box, {display:'block'})
            .to(box, 0.8, {scale:1, opacity:1, ease: Power3.easeOut}, '+=0.1')
    }
  }
}); //end window onload