isotope filtering only detecting first item as visible in viewport

Question

I'm using an isinviewport script throughout my site to detect when something is visible in the viewport. However when trying to use it with Isotope filtering it's only detecting the first item on first load, then as I scroll the item right next to it then gets the class applied to it.

I'm trying to get a class of o-image-reveal added to the first two items, which are visible in the viewport, on first load. I can't add these classes manually on the actual site.

Here is my code below:

$.fn.isInViewport = function() {
  let elementTop = $(this).offset().top;
  let elementBottom = elementTop + $(this).outerHeight();
  let viewportTop = $(window).scrollTop();
  let viewportBottom = viewportTop + $(window).height();
  return elementBottom > viewportTop && elementTop < viewportBottom;
};

$('.js-image-reveal').each(function(i, el) {
  if ($(this).isInViewport()) {
    $(this).addClass('o-image-reveal');
  }
})

var $grid = $('.grid').imagesLoaded(function() {
  $grid.isotope({
    itemSelector: '.portfolio__item'
  });
});

var filters = {};

$('.filters').on('click', '.filter__item', function(event) {
  var $button = $(event.currentTarget);
  var $buttonGroup = $button.parents('.button-group');
  var filterGroup = $buttonGroup.attr('data-filter-group');
  filters[filterGroup] = $button.attr('data-filter');
  var filterValue = concatValues(filters);
  $grid.isotope({
    filter: filterValue
  });
});

$('.button-group').each(function(i, buttonGroup) {
  var $buttonGroup = $(buttonGroup);
  $buttonGroup.on('click', '.filter__item', function(event) {
    $buttonGroup.find('.is-checked').removeClass('is-checked');
    var $button = $(event.currentTarget);
    $button.addClass('is-checked');
  });
});

function concatValues(obj) {
  var value = '';
  for (var prop in obj) {
    value += obj[prop];
  }
  return value;
}

.col-md-6 {
  max-width: 50%;
}

.col-md-12 {
  max-width: 100%;
}

.portfolio__item {
  margin-bottom: 40px;
}

.filter__item {
  display: inline-block;
  padding: 0 20px;
  font-size: 18px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.o-image-reveal {
  opacity: 0.5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/imagesloaded.pkgd.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/isotope.pkgd.min.js"></script>
<div class="filters">
  <div class="button-group js-radio-button-group" data-filter-group="work">
    <div class="filter__item is-checked" data-filter="">All work</div>
    <div class="filter__item" data-filter=".filter-one">Filter 1</div>
    <div class="filter__item" data-filter=".filter-two">Filter 2</div>
    <div class="filter__item" data-filter=".filter-three">Filter 3</div>
    <div class="filter__item" data-filter=".filter-four">Filter 4</div>
  </div>
</div>

<div class="grid">
  <a href="#" class="portfolio__item col-md-6 filter-one">
    <img class="js-image-reveal" src="http://placekitten.com/g/600/600" /> Title Here
  </a>
  <a href="#" class="portfolio__item col-md-6 filter-two">
    <img class="js-image-reveal" src="http://placekitten.com/g/600/600" /> Title Here
  </a>
  <a href="#" class="portfolio__item col-md-12 filter-three">
    <img class="js-image-reveal" src="http://placekitten.com/g/600/600" /> Title Here
  </a>
  <a href="#" class="portfolio__item col-md-12 filter-four">
    <img class="js-image-reveal" src="http://placekitten.com/g/600/600" /> Title Here
  </a>
  <a href="#" class="portfolio__item col-md-6 filter-one">
    <img class="js-image-reveal" src="http://placekitten.com/g/600/600" /> Title Here
  </a>
  <a href="#" class="portfolio__item col-md-6 filter-two">
    <img class="js-image-reveal" src="http://placekitten.com/g/600/600" /> Title Here
  </a>
</div>

Here is a jsFiddle.