MixItUp Example

Test filtering using mixitup jQuery plugin

HTML

<div id="filter">
    <span>Filter</span>
    <ul class="filter-list">
        <li data-filter="all" class="filter active"><a href="#">All</a></li>
        <li data-filter="lemon" class="filter"><a href="#">Lemon</a></li>
        <li data-filter="orange" class="filter"><a href="#">Orange</a></li>
        <li data-filter="apple" class="filter"><a href="#">Apple</a></li>
    </ul>
</div>

<ul id="grid">
    <li class="mix lemon">
        <h3>Lemon</h3>
        <p>Some text here</p>
    </li>
    <li class="mix orange">
        <h3>Orange</h3>
        <p>Some text here</p>
    </li>
    <li class="mix apple">
        <h3>Apple</h3>
        <p>Some text here</p>
    </li>
</ul>

CSS

li {
    list-style: none;
}

#grid .mix{
    opacity: 0;
    display: none;
    padding: 10px;
    border: 1px solid #d0d0d0;
    width: 150px;
    margin: 0 0 10px 10px;
}

JavaScript

(function(e){function k(c,a,g,d,b){function j(){l.unbind();a&&v(a,g,d,b);b.startOrder=[];b.newOrder=[];b.origSort=[];b.checkSort=[];u.removeStyle(b.prefix+"filter, filter, "+b.prefix+"transform, transform, opacity, display").css(b.clean).removeAttr("data-checksum");window.atob||u.css({display:"none",opacity:"0"});l.removeStyle(b.prefix+"transition, transition, "+b.prefix+"perspective, perspective, "+b.prefix+"perspective-origin, perspective-origin, "+(b.resizeContainer?"height":""));"list"==b.layoutMode?
(q.css({display:b.targetDisplayList,opacity:"1"}),b.origDisplay=b.targetDisplayList):(q.css({display:b.targetDisplayGrid,opacity:"1"}),b.origDisplay=b.targetDisplayGrid);b.origLayout=b.layoutMode;setTimeout(function(){u.removeStyle(b.prefix+"transition, transition");b.mixing=!1;if("function"==typeof b.onMixEnd){var a=b.onMixEnd.call(this,b);b=a?a:b}})}clearInterval(b.failsafe);b.mixing=!0;if("function"==typeof b.onMixStart){var f=b.onMixStart.call(this,b);b=f?f:b}for(var h=b.transitionSpeed,f=0;2>
f;f++){var m=0==f?m=b.prefix:"";b.transition[m+"transition"]="all "+h+"ms linear";b.transition[m+"transform"]=m+"translate3d(0,0,0)";b.perspective[m+"perspective"]=b.perspectiveDistance+"px";b.perspective[m+"perspective-origin"]=b.perspectiveOrigin}var r=b.targetSelector,u=d.find(r);u.each(function(){this.data={}});var l=u.parent();l.css(b.perspective);b.easingFallback="ease-in-out";"smooth"==b.easing&&(b.easing="cubic-bezier(0.25, 0.46, 0.45, 0.94)");"snap"==b.easing&&(b.easing="cubic-bezier(0.77, 0, 0.175, 1)");
"windback"==b.easing&&(b.easing="cubic-bezier(0.175, 0.885, 0.320, 1.275)",b.easingFallback="cubic-bezier(0.175, 0.885, 0.320, 1)");"windup"==b.easing&&(b.easing="cubic-bezier(0.6, -0.28, 0.735, 0.045)",b.easingFallback="cubic-bezier(0.6, 0.28, 0.735,...