Sort and Filter content
on Webflow with MixitUp3

General

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. All information you can find on the official 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

Disclaimer: I am NOT affiliated anyhow to the MixitUp and created this tutorial ONLY for sharing my knowledge and experience of using it within Webflow projects

Basic Filtering and Sorting

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.

STEP 1.

.container
.mix

Creating layout for filtering

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:



STEP 2.

.mix .blue
.mix .red
.mix .purple
.mix .orange
.mix .purple
.mix .blue
.mix .blue
.mix .orange
.mix .red

Applying "categories" for filtering content

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:



STEP 3.

.mix .blue
data-number="01"
.mix .red
data-number="02"
.mix .purple
data-number="03"
.mix .orange
data-number="04"
.mix .purple
data-number="05"
.mix .blue
data-number="06"
.mix .blue
data-number="07"
.mix .orange
data-number="08"
.mix .red
data-number="09"

Sorting attributes

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. 

Important! : When adding custom sorting attributes to your content, ensure that all attributes are present on all targets in your container.

So I created attributes:

  • data-number="01"
  • data-number="02"
  • data-number="03"
    ....
  • data-number="09"

STEP 4.

01

02

03

04

05

06

07

08

09

Building Controls

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:

  • data-filter attribute for the filtering buttons.

    Each button's attribute has to have value that is equal a classname (selector) that this button suppose to show. In my example I will get values:
    - .orange,
    - .blue,
    - .purple,
    - .red,
    Value all will be used to show all content.
Important! : Don't forget to type a dot (.) ahead of classname in the data-filter attribute value. It is very important for the plugin logic.



  • data-sort attribute for the sorting buttons

    Each button's attribute has to have one of the values:
    - number:asc (for the Ascending sorting),
    - number:descending (for the Descending sorting),
    - random (for Random sorting).

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.



STEP 5.

01

02

03

04

05

06

07

08

09

Connecting MixitUp library

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> tag before the closing </body> tag into the page custom code area.

Code will look like this:

<script src="link_to_the_file" type="text/javascript"></script>
You can use public CDN link: https://cdnjs.cloudflare.com/ajax/libs/mixitup/3.3.0/mixitup.min.js

STEP 6.

Open this example in a new tab

This example above is fully functional, feel free to try Filtering or Sorting.

Enabling MixitUp functionality on the container

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:

  • either call the function passing a selector (container's classname) string
  • or a reference to your container element as the first parameter

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:

(I choose to use a public CDN link fo connecting the MixitUp here: https://cdnjs.cloudflare.com/ajax/libs/mixitup/3.3.0/mixitup.min.js)
TIP: You can use an ID for the container or any other classname that you used for the div with filtering content.

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.

Extra




Example: Create a mixer with all animations disabled

or

Variant of code depends on which way you choose to instantiate the mixitup function

Configuration

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:

  • enable

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

  • effects

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.

  • duration

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.