The jQuery plugin MixItUp filters and sorts animations

What is MixItUp?

MixItUp is an jQuery plugin that provides animation filtering and sorting.
MixItUp is great for managing anything that categorizes or sorts content like portfolios, galleries and blogs, and can also be used as a powerful tool for engaging in user interface and data visualization for applications.
MixItUp works well with your existing HTML and CSS, making it an excellent choice for responsive layouts.
Instead of using absolute positioning to control the layout, MixItUp is designed to work with the existing online flow layout. Want to use percentages, media queries, inline-block, or even curved boxes? No problem!

Page code

<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> 

The MixItUp target and class mix the elements in the container. Category filter adds custom data properties for class and sort properties.

Set up your filter control:

class="filter" data-filter=".category-1">Category 1 
class="filter" data-filter=".category-2">Category 2 

Filtering occurs when the filter button is clicked.

Create your sort control:

class="sort" data-sort="my-order:asc">Ascending Order 
class="sort" data-sort="my-order:desc">Descending Order 

Sort occurs when the sort button is clicked.

CSS

#Container .mix{ 
  display: none; 
} 

In the project style, the setting target element does not display attributes. MixItUp will display only those filter elements that match the current one.

JS

Container using jQuery on instance MixItUp:

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

Using the ID of our container, we can instantiate the MixItUp and jQuery methods.mixItUp ()

See DEMO download now

That's all for this article, I hope you enjoy it.