9

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

Radmation
  • 1,262
  • 12
  • 24

1 Answers1

3

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: '*' });
});
Mike
  • 1,416
  • 9
  • 16
  • It looks like 'reLayout' was renamed to 'layout'. Also it doesn't appear to be working. Looks like I spoke to soon. I was getting a console error and filtering wasn't being applied so of course when I scrolled down there were no gaps - because no filtering took place!! Thanks for the help though. – Radmation Sep 12 '16 at 20:57
  • I do not think either of these will work because scrollReveal add these items to the "hidden elements" `position: absolute; left: 49.9638%; top: 990px; visibility: visible; transform: translateY(20px) scale(0.9); opacity: 0; background: url("http://functionfindsform.com/UCUT/wp-content/uploads/2016/07/past-present-future-1.jpg");` The transforms and opacity i think are interfering? Not sure though why 'layout' won't effect these. – Radmation Sep 12 '16 at 21:00
  • You can easily do a relayout after the scrollreveal function using afterReveal callback. Or you could only use reveal on the elements that need it by only applying it to applicable containers. ie: sr.reveal('.bar'); – Mike Sep 12 '16 at 21:11
  • Yes that works - but it adds "weird effects" not my words but the clients. It rearranges the tiles after they fade in when scrolling. It does fix the holes issue though. Does scroll reveal have a built in revealAll function? I was considering scrolling to the bottom of the page and back to the same point really fast (so the user can't see it) then calling the filter function - but that is just gross IMO. I also tried it in the beforeReveal callback. – Radmation Sep 12 '16 at 21:29
  • You're already using bootstrap, why not use scrollspy thats built in if this is not giving the desired effect? Limiting what you tie into scrollreveal should solve your problems. Also, Looks like its working correctly this morning, did you fix it? – Mike Sep 13 '16 at 14:02
  • Well I uncommented the code in the beforeReveal to call the $grid.isotope('layout') to fix the holes. It's almost unnoticable but the filtered items when you scroll down with instead of fading in - they will 'tile in' if that makes sense. I think it is good enough but would still like to know if there is a "Reveal All" thing I can do prior to calling the isotope's filter function. I guess I could look for all elements with those styles applied and unapply them - but I wonder if i scroll a little if they will just be reapplied. Meh either way a 'revealAll()' would be nice. – Radmation Sep 13 '16 at 17:18