Animated Filtering & Sorting with the MixItUp jQuery Plugin

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:

Continue reading this article on SitePoint

Great Demo.
Not come accross this before so having a play. Is it possible to have more than one filter? For example in your demo, to have an “All / Active / Inactive” filter as well as the existing “All / Under / Grad / PHD” filter?
Top work :slight_smile:

Happy to know that you liked the article! Yes, it’s possible! To demonstrate it, I extended the demo of this article so as to include another filter. You can take a look at it here. For more customization, I also suggest you to read the documentation.

This has helped me on several occasions recently. Thank you for putting this together. I am trying to have 2 separate width classes (1 = 20% width, 2 = 40%+single gutter width). Would you happen to know how to have variable widths?

Hi @BHWD,

I’m afraid I didn’t understand what you want to do. Can you give me an example?

Can this effect be done with dropdowns?

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.