Streaming live at 10am (PST)

[TUTORIAL] MixItUp filtering plugin with Dynamic content


Hi, @Alexander_von_Stauff!

I saw similar problem few times already and the main reason is the layout :slight_smile:

The Collection list Wrapper has no width, then the Collection list set to width: 100% and display: flex.
When filtering happens and items getting “removed” from the container (Collection list) it shrinks automatically because 100% of nothing (remember, no width set on its parent :point_up:) is … nothing :woman_shrugging:t3:.

So if you will make Collection List wrapper to width: 100% it will keep all containers in place and animations will not look so weird:


Hope it clears your doubts :slight_smile:



The multi filter is still giving me a bit of a headache though. It likes to disapear after I click a checkbox for example.

@Daan_van_Hal, you added all possible filtering methods to one page, there might be some conflicts between them, I am afraid.
Would you consider experimenting with them on separate pages and see if you will get a better results?


Thank you, Anna, it worked, I simply didn’t notice my Collection List wrapper. #shame :blush:


Thank you @sabanna for your amazing tutorial.
I too am working on a project where I need to filter more than 100 items (which is the collection list limit). I tried putting 3 lists on the same page and with the same structure but mixitup only puts an ID on the first collection list it sees and therefore only filters the first…
How would you recommend doing this ? Have you tried the pagination from mixitup in combination with multidimensional filters?

Thanks a million :slight_smile:


Ok so the .container doesn’t need to be the collection list. You can make it a div and add several collection lists inside where the items are the .mix elements. Seems to work !


Thank you so much for putting this together. I was able to get this working at the basic level, but am having some visual errors when elements resize after filtering, with a “snapping” to size when resizing to fit the container.


It happens because of the flex settings that you have on those elements. After Plugin re-arranges them, flex-grow CSS property make elements take all available space.

Unfortunately, it looks like there is no way to animate the size change with the plugin.


Thought that was the cause. Thats to bad :frowning: Thank you for the response, @sabanna!


Hey, @Dekthro!

I found in the MixitUp documentation how you can control transition the height and width of target elements as they change throughout the course of an animation.

You will have to add a special “operator” in the plugin call:

mixitup(containerEl, {
    animation: {
        animateResizeTargets: true

Note: This feature requires additional calculations and manipulation to non-hardware-accelerated properties which may adversely affect performance on slower devices, and is therefore disabled by default.


Heck yeah, awesome! Thanks for finding that out, I’ll give it a shot!


Hi All. I have gone through the tutorial a few times now and I can’t seem to get the filter to actually select anything. When I select the categories I am hoping to filter it just animates to an empty collection. I get that for each of my categories. BFDIO . Any help would be greatly appreciated.


Hi, @freshlesh3!

Could you please share a read-only link to your project and also a link to a published page with the content that you try to filter?


Yes, sorry. here is the read only link:

Here is the published page:

And I am trying to filter the “filter” div block in section 15 of the home page

  1. Values of data-filter attributes has to be all lowercased and all spaces should be replaced with dashes (should look like CSS classes)

  2. Do not apply class .categ to the actual collection items. It should be any typography element INSIDE the collection item.

Let me know if it helped. Cheers,


Yes it worked finally. Thank you. I couldn’t figure out what I had done wrong, appreciate the support.