ScrollReveal.js — Reveal All items on Click or Event?

Question

Is there a way to reveal all items with scroll reveal with a click event? Perhaps a reveal all function?

Problem:

I am using scroll reveal as well as Isotope. The sorting functionality of isotope reacts strange with scroll reveal.

When I click a "filter" button I am calling the isotope function filter.

 $grid.isotope({filter: '.fish-filter'}); // example

However if I scroll down after clicking said filer button there are holes in my grid and I have to "re-click" the button after all items have been revealed via scrolling

Thanks!!

Update

I have added the layout call here - this at least fixes holes that were present before:

window.sr = ScrollReveal({
    beforeReveal: function (domEl) {
        //$grid.isotope( 'layout'); // fixes holes
    },
    afterReveal: function (domEl) {
        $grid.isotope('layout');
    }
});

However - the newly filtered items don't "fade in" as they do with scroll reveal they "tile in" as with the styling from isotope. The ideal situation would be a reveal all and layout scenario - that way you cannot notice any differences in animations - or another situation could be just the simple constant fading in regardless of filters clicked.

Update Update

We decided to make all the tiles the same height so no longer are experiencing the problem.

Thanks

Answer 1

Isoptope has a function called relayout. You may use it like this $grid.isotope( 'reLayout', callback )

You may read the docs here

This function may be of more use given the problem you're experiencing.

However, to answer your question specifically: Isotope simply adds a class to hide the items, so you may 'reset' by using a function like this

$('button').on('click', function() { 
    //You can reset the CSS 
    $('.isotope-hidden').removeClass('isotope-hidden');
    //Or you can use the isotope filter reset. 
    $grid.isotope({ filter: '*' });
});