Видео описание

Видео описание

У меня есть две функции которые должны работать при нажатии на одну кнопку( кнопок будет несколько). Первая функция отвечает за работу фильтра и анимацию карточек, а вторая за сетку масонри. При переключении фильтра(первая функция), сетка масонри(вторая функция) сбиваеться, поэтому ее нужно перезагружать. \

Задача:

Сделать так, что бы при нажатии на кнопку с фильтром, внешниц вид сетки масонри оставался таким же как и при первой загрузке страницы. Тоесть когда выбираешь один из фильтров, то количество карточек меняеться но внешний вид и анимация сетки масонри оставаль такой же как и при первой загрузки страницы.

Страница с сайтом https://limitedgravity.webflow.io/work-copy

Прошу заметить что сайт разработан на платформе webflow и структуру html нужно оставить такой же. Это связано с тем что карточки подвязаны под встроеную cms которая должна иметь определьоную структуру.

Примечание : Возможный вариант событий: При загрузки первой функции сделать так что бы перезагружалась сетка масонри. Важно что бы анимация при переключении оставалась без рывков.

macyInstance.recalculate(true); - перезагружает сетку масонри.

Первая функция

Отвечает за переключение фильтров и анимацию всередине карточек.

Работоет с библиотекой https://www.finsweet.com/cms-library-script-writer/

<!--- start cms-library-script-writer.finsweet --->

<script src="<https://cdn.finsweet.com/files/cmslibrary-v1.8.js>"></script>
<script>
(function() {
var fsComponent = new FsLibrary('.macy-container')

var myFilters = [
  {
    filterWrapper: '.filter-wrapper',
    filterType: 'exclusive'
  }
]

fsComponent.filter({
  filterArray: myFilters,
  activeClass: 'active-category-masonry',
   animation: {
    enable: true,
    duration: 500,
    easing: 'ease-out',
    effects: 'fade translate(0,30px) ',
   
  }	
 
})
 
})();

</script>

Вторая функция

Отвечает за работу сетки масонри. При переключении первой функции сетка сбиваеться поэтому нужно обновлять эту функцию с помощью macyInstance.recalculate(true);

Работоет с библиотекой https://github.com/bigbite/macy.js

<script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/macy.min.js>"></script>

<script>

var macyInstance = Macy({
    container: '#macy-container', //Id of the grid
    trueOrder: true, 
    waitForImages : false , 
    margin: 25, //Gap between
    columns: 4, //Colums
    debug: true,
    mobileFirst: true,
    breakAt: {
        1200: 3,
        940: 2,
        520: 2,
        400: 1
    }
});

</script>

// при нажатие на кнопку обновляеться сетку масонри 
<script>

var btn1 = document.getElementById('btn1'),
    btn2 = document.getElementById('btn2');

function example1() {
     macyInstance.recalculate(true);
     macyInstance.recalculate(true);
}
btn1.onclick = example1;
btn2.onclick = example1; 
</script>

Hidden Work Categories → Categories multiwrap