Streaming live at 10am (PST)

Mixitup filtering and masonry (left to right) Issue

Hey there!

I finally figured out how to get a Masonry-Grid (Masonry Layout) and it worked fine. Then I tried to make a dynamic filter like @sabanna (How to add dynamic filtering and sorting to your Webflow websites | Webflow Blog).
It also works fine, but when I try to use them together there is a collision of the js.
The layout gets broken because the masonry js does the ordering just when the window is loading (I think).

I found this on stackoverflow (jquery - MixItUp and Masonry are not working together - Stack Overflow), but I don’t get to work.

(I also tried to use this masonry: Webflow Masonry grid ( #Pinterest), no Custom Code required as well but I got some issues there too, like the items doesn´t start at the same line, in responsive there some issues too. Maybe I´m doing something wrong…)

Does anybody has some thoughts or other suggestions?
I am already really desperate, please please help me! Thank you

Shared Link:

Here is my custom code:

<script src=""></script>
<script src=""></script>


//Convert any text into CSS-friendly
var conv = function (str) {
    if (!str) {
        str = 'empty';
    }  return str.replace(/[!\"#$%&'\(\)\*\+,\.\/:;<=>\?\@\[\\\]\^`\{\|\}~]/g, '')
              .replace(/ /g, "-")
// Create dynamic filtering attributes from the “filtering-categories” classes
  var catArray = document.querySelectorAll('.w-dyn-item .filter-category2');
  catArray.forEach( function(elem) {
    var text = elem.innerText || elem.innerContent;
    var className = conv(text);
  //Create custom data-date attributes from blog dates
  var sortArray = document.querySelectorAll('.w-dyn-item .sort-category');
  sortArray.forEach( function(sortElem) {
    var sortText = sortElem.innerText || sortElem.innerContent;
    sortElem.parentElement.parentElement.setAttribute('data-date', sortText);

  //Define the container with the filtered content (class nam of collection-list)
  var containerEl = document.querySelector('.masonry');
  //create the call for the mixer function

   //init masonry grid 
	$(window).on("load", function() {
    	itemSelector: '.mix'

Hi, @timonf !

I think in your case you would want to use Isotope plugin, which handles Filtering and Masonry layout in one code library.