Features

Learn what MixItUp can do for your project

• Filter and sort elements with CSS3-optimised animations
• Build on top of your existing percentage-based responsive layouts and media queries
• Control filtering and sorting via a simple clickable interface or build more complex custom UI via an extensive API
• Customise your animations with CSS3 transforms and easing
• Add and remove elements in real time via an Ajax-friendly API
• Perform simultaneous filter, sort, and layout change operations

• Optimised animation engine utilising requestAnimationFrame
• Extensible object-oriented architecture
• Flex box compatibility (experimental)
• CSS3 columns compatibility
• Fine-tune your animation effects with customisable parameters
• Reverse the direction of effects for elements being filtered out
• Queue filter, sort and layout change operations
• Metro/iOS-inspired “stagger” effect
• CSS-selector based filtering
• Multi-dimensional sorting
• Retrieve real-time data via the state object
• Extensions
• Transition width/height of target elements (experimental)

• Fully functional in desktop Chrome, Safari and Firefox
• Fully functional in iOS and Android browsers
• Functional in IE8+ with animations disabled, fully functional IE10+

You can see demo or details Click Here

Download Here From Github

<div id="Container">
<div class="mix category-1" data-my-order="1"> ... </div>
<div class="mix category-1" data-my-order="2"> ... </div>
<div class="mix category-2" data-my-order="3"> ... </div>
<div class="mix category-2" data-my-order="4"> ... </div>
</div>

MixItUp targets elements with the class mix inside a container. Categories for filtering are added as classes, and sort attributes are added as custom data attributes.

Step #05:Build your filter controls:

<button class="filter" data-filter="all">Show All</button>
<button class="filter" data-filter=".category-1">Category 1</button>
<button class="filter" data-filter=".category-2">Category 2</button>

Filtering happens when filter buttons are clicked.

CSS

Step # 06: Hide target elements:

#Container .mix{
display: none;
}

In your project’s stylesheet, set the display property of target elements to none. MixItUp will show only those elements which match the current filter.

JS

Step# 07: Instantiate MixItUp on your container using jQuery:

$(function(){
$('#Container').mixItUp();
});

Or Full Script

<script type="text/javascript">
$(function(){
$('#Container').mixItUp();
});
</script>

Using our container’s ID, we can instantiate MixItUp with the jQuery method .mixItUp()

You can see more docs just click here