Problems with js filter

[polemonade]

I am using AOS with a js filter to filter categories within the page.

When I filter, the elements that are not being seen on the screen at the same time, are hidden, since as it has not been scrolled they have not been loaded.

How can I make it do the effect on the scroll and at the same time, when I filter it appears?

[Scopestyle]

Hey @polemonade, try adding AOS.refresh(); after your JS filter action.

[polemonade]

Thanks @Scopestyle for aswering. I tried AOS.refresh(); and AOS.refreshHard(); and only appears if I click two times in the filter item.

[polemonade]

Hey!

I just read this post issue and followed the steps and for the moment is working :)

It was about recalculate all offsets and positions. I fixed this with this codepen example

[Scopestyle]

Awesome, glad I could point you in the right direction 😄

[RolandTi]

Hello ! I'm having the same issue here, but the codepen use jquery and not vanilla js. I'm a bit lost because I'm adding AOS.refresh(); when the class change, so It should work 😊

 <script>
	AOS.init({
	 duration: 800,
	  easing: 'ease-in-sine',
	});

const filters = document.querySelectorAll('.filter');
filters.forEach(filter => { 

  filter.addEventListener('click', function() {

    let selectedFilter = filter.getAttribute('data-filter');
    let itemsToHide = document.querySelectorAll(`.projects .project:not([data-filter='${selectedFilter}'])`);
    let itemsToShow = document.querySelectorAll(`.projects [data-filter='${selectedFilter}']`);

    if (selectedFilter == 'all') {
      itemsToHide = [];
      itemsToShow = document.querySelectorAll('.projects [data-filter]');
	  AOS.refresh();
    }

    itemsToHide.forEach(el => {
      el.classList.add('hide');
      el.classList.remove('show');
	  AOS.refresh();
  });

    itemsToShow.forEach(el => {
      el.classList.remove('hide');
      el.classList.add('show');
	  AOS.refresh();
    });
  });
});

[mzemlickis]

Hey @polemonade, try adding AOS.refresh(); after your JS filter action.

Thank you! This helped! In my use case - parent with a bunch of sections with toggle at the top to hide just one class sections. Once filtered it was not showing up, now with refresh its nice.