Originally published at: http://www.sitepoint.com/animated-filtering-sorting-mixitup-jquery-plugin/
Filtering and sorting parts of your website is a great way to organize it. Portfolios, albums, and blogs are just a few examples of things you might want to categorize. To achieve this, many jQuery plugins can help. Examples are the MixItUp, Isotope, and Quicksand plugins.
In this article, I’ll go over the basic features of MixItUp and show you all the steps needed to take advantage of it in your projects. To better demonstrate how this plugin works, I’ve also created a demo, which I’ll refer to throughout the article.
What is MixItUp?
As mentioned above, MixItUp is a jQuery plugin that allows you to filter and sort elements using CSS-based animations. You can integrate MixItUp easily into your existing layouts. All that’s needed is to target the desired elements and the plugin will do the grunt work for you.
For non-commercial projects, you can use MixItUp for free. However, a license is required if you choose to use it in a commercial project. More information is available on their licenses page.
As described on their features page, browser support is decent (including IE10+ with full functionality, and a fallback to no animations but functional in IE8+).
With that brief introduction, let’s see the required steps in order to use it.
Getting Started with MixItUp
To get started with MixItUp, you have to make sure that both the jQuery and MixItUp scripts are included in your projects. You can download them by visiting their respective websites or by using a package manager, like Bower. There’s also the option to load the necessary scripts via CDNs.
For our demo, we’ll use the third option. These scripts will be placed before the closing body
tag: