Mixitup filtering and masonry (left to right) Issue

Design help Custom code
1

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:
https://preview.webflow.com/preview/on-dizziness-relaunch?utm_medium=preview_link&utm_source=dashboard&utm_content=on-dizziness-relaunch&preview=19a8b9e04d9f812693f1c653d289bcbd&mode=preview

Here is my custom code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/mixitup/3.3.0/mixitup.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.1/masonry.pkgd.min.js"></script>




<script>
  

  
//Convert any text into CSS-friendly
var conv = function (str) {
    if (!str) {
        str = 'empty';
    }  return str.replace(/[!\"#$%&'\(\)\*\+,\.\/:;<=>\?\@\[\\\]\^`\{\|\}~]/g, '')
              .replace(/ /g, "-")
              .toLowerCase()
              .trim();
  };
  
// 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);
    elem.parentElement.parentElement.parentElement.parentElement.parentElement.classList.add(className);
  });
  
  //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
  mixitup(containerEl);

   //init masonry grid 
	$(window).on("load", function() {
		$('.masonry').masonry({
    	itemSelector: '.mix'
  		});
	});  
   
</script>
2

Hi, @timonf !

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