Quick MixItUp setup

by Hugo Carneiro

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/mixitup/2.1.11/jquery.mixitup.min.js"></script>
<div class="container-fluid">
  <div class="filter" data-filter="all">Show All</div>
  <div class="filter" data-filter=".category-1">Category 1</div>
  <div class="filter" data-filter=".category-2">Category 2</div>
  <div id="Container">
    <div class="mix col-sm-4 category-1" data-myorder="2"></div>
    <div class="mix col-sm-4 category-2" data-myorder="4"></div>
    <div class="mix col-sm-4 category-1" data-myorder="1"></div>
    <div class="mix col-sm-4 category-2" data-myorder="8"></div>
  </div>
</div>

CSS

#Container .mix {
  display: none;
}

.filter {
  cursor: pointer;
  display: inline-block;
  padding: 10px;
}

.mix {
  min-width: 33.33333333%;
  margin-right: 5px;
  margin-bottom: 5px;
  height: 150px;
  border: 1px solid #d4d4d4;
}

.mix:last-child {
  margin-right: 0px;
}

.mix:nth-child(1) {
  background-color
}

JavaScript

$(function() {

  $('#Container').mixItUp({
    selectors: {
      target: '.mix',
      filter: '.filter'
    },
    animation: {
      duration: 400,
      effects: 'fade translateZ(-360px) stagger(34ms)',
      easing: 'ease'
    }
  });

});