[TUTORIAL] MixItUp filtering plugin with Dynamic content

[sabanna (Anna)]

Hi, @Alexander_von_Stauff!

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

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 ) is … nothing .

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

Cheers,
Anna

[sabanna (Anna)]

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?

[Alexander_von_Stauff (Alexander Von Stauffenberg)]

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

[pepperclip (Dorian)]

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

[pepperclip (Dorian)]

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 !

[Dekthro (Derek Highet)]

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.

https://dtmcreative.webflow.io/projects

[sabanna (Anna)]

@Dekthro

but am having some visual errors when elements resize after filtering

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.

[Dekthro (Derek Highet)]

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

[sabanna (Anna)]

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.

[Dekthro (Derek Highet)]

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

[freshlesh3 (Daniel Aleshinloye)]

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.

[sabanna (Anna)]

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?

[freshlesh3 (Daniel Aleshinloye)]

Yes, sorry. here is the read only link:

https://preview.webflow.com/preview/bfdio?utm_source=bfdio&preview=89b93274fd8a9f5d8245739a6e0b7ee2

Here is the published page:

Design Professional Websites Visually

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

[sabanna (Anna)]

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,
Anna

[freshlesh3 (Daniel Aleshinloye)]

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

[Johnnie (Johnnie Gómez Alzaga)]

You are AWESOME @sabanna. Took me a while to get there but finally got it right. Now trying to have two types of filterables in the same page.

[olivierp (Olivier)]

Hi @sabanna

I’m trying to replicate one of your example for my project, but I’m missing something (because it’s not working

The page that I’m trying to replicate is named in your project: My_Page_CMS_checkbox 2

If you could have a look on my project, It will be awesome:
My share link: https://preview.webflow.com/preview/case-studies-9e39a6?utm_source=case-studies-9e39a6&preview=53ac247483848f1baeb516f9c7485919

The live project: https://case-studies-9e39a6.webflow.io/

I’ve the feeling that I’ve copied almost exactly your project, so I really don’t understand.

Moreover, I’ve bought the MixItUp MultiFilter thing, but I’ve not used it yet (just put your link so far).

[sabanna (Anna)]

Hi, @olivierp!

1. You forgot to set value to “All” checkbox. It should be equal string all. It causing the error during the code execution.

2. Categories as classes should be applied to Collection item (.mix).
   In your case category sits inside one more element that is inside the Collection item.
   

Count it like 2 levels deep inside the Collection item. That means that code snippet that is responsible for the converting categories to classes need some adjustments:

Each level of “deepness” require one .parentElement parameter (which basically can be translated as “apply this to a parent element”)

In your case it would require one more, so that line of code would look like this:
elem.parentElement.parentElement.classList.add(className);

Please, apply these changes and re-publish the site. Let me know if it will solve the problem.

Cheers,
Anna

[olivierp (Olivier)]

Hi @sabanna

Thanks a lot for your answer, I’ve made the modifications & it’s working well!.

Thanks again.

Olivier

[olivierp (Olivier)]

Hi @sabanna

Following our last conversation, I’ve done some modifications to my project website.

You told me previously:
"Each level of “deepness” require one .parentElement parameter (which basically can be translated as “apply this to a parent element”)

In your case it would require one more, so that line of code would look like this:
elem.parentElement.parentElement.classList.add(className);"

I’ve added new element, so I’m supposed to change the code.

But to be honest I’m not sure of what I’m supposed to change. I guess it’s this part:
“elem.parentElement.parentElement.classList.add”

but I’m not sure.

If you could guide me (I hope It will be the last time…)

Shared link

Thanks again!!
Olivier