MixItUp 3 is a dependency-free library for animated filtering and sorting. Great for managing any categorized or ordered content like portfolios, galleries and blogs. Can be used both with static and dynamic content.
With MixItUp3 you can Filter content by one or several categories(tags), Sort content by date or title, combine both of these functions or even select items in certain price(size) range.
In this tutorial I will show you how to create most common filters and sort on your site.
More information you can find on the official MixItUp3 site.
MixItUp is an open-source and free to use for non-commercial use. If you're planning to use it in a commercial project or product, you will need to purchase a commercial license.
Basic Filtering and Sorting example works great for pages, that has only static content to filter and not require complex filtering (filtering by few parameters, eg. color+size+price). It is pretty easy to maintain and takes minimum effort.
By default, MixItUp will look for a div with the selector, which name we will specify in the code and filter elements inside of it that matching the selector .mix. For the standard approach in this tutorial I am using selector .container, but you can use the selector name that fits needs of your design structure or even specify the div by ID.
So create a div .container and add you filtering content inside of it. It can be divs, images, links, etc. But that all have to have selector .mix
Our structure will look like this:
To let MixItUp filter elements, each one should be given a specific selector. It can be anything, that specifies what category this element belongs to (colors, size, tags, etc.. ).
We will apply those selectors as a combo-class to each .mix element.
In this example I am using different colors. So I created combo-classes as color names:
We also can sort our content according to specific values. To do that we will reference a custom data attribute in the .mix element settings.
In this example I will use just simple numbers for sorting, but you can use price, date, or even sort alphabetically.
So I created attributes:
Filter and Sort controls will be created by adding custom data attributes to the buttons or link-blocks (depends on your choice).
So, first we will add buttons and style them. I will create classes .filter_button and .sort_button for that.
Next we have to do is apply data attributes to each button:
Important! : this attribute must match the data attribute that you created for your .mix elements.
For example, if you used data-price attribute for the content elements, then you will need to use values price:asc and price:descending accordingly.
Firstly, we will need a link to the MixItUp JavaScript library. You can either download files from the official site and upload it to your cloud server, or use public CDN link.
Then we have to include that link via <script> </script>tag before the closing tag into the page custom code area.
Code will look like this:
This example above is fully functional, feel free to try Filtering or Sorting.
Now, with the mixitup() function connected, we can enable MixItUp functionality on our container by instantiate a "mixer".
We can do this in 2 ways:
and a the newly instantiated mixer will be returned.
The "mixer" is now ready for us to interact with, either via its controls, or its API (see Mixer API Methods on the official site). Click a control or call an API method to check that everything is working correctly.
Now our code will look like this:
or like this:
Important! Since in this Basic Filtering and Sorting example, we are calling mixitup function only once, I removed "var mixer =" from the code. But, if you are going to use more advanced functionality of this plugin, you will need to add it again.
Now our "mixer" is installed and ready to use.
Example: Create a mixer with all animations disabled
or
To customize the functionality of your mixer you can add an optional "configuration object" as the second parameter to the mixitup function.
Animation configurations, a group of properties defining the mixer’s animation and effects settings:
Default: true
A boolean dictating whether or not animation should be enabled for the MixItUp instance. If false, all operations will occur instantly and syncronously, although callback functions and any returned promises will still be fulfilled.
Example: Apply "fade" and "translateZ" effects to all animations
Example: Apply an animation duration of 200ms to all mixitup animations
Default: 'fade scale'
A string of one or more space-seperated properties to which transitions will be applied for all filtering animations. Properties can be listed any order or combination, although they will be applied in a specific predefined order to produce consistent results.
To learn more about available effects, experiment with the sandbox on the official site and try out the “Export config” button in the Animation options drop down.
Default: 600
An integer dictating the duration of all MixItUp animations in milliseconds
Here I only showed a few. Full list of the options you can find on the official site.