JSFiddle - React, Tailwind, and code Playground

HTML

<div class="column">1</div>
<div class="column">1</div>
<div class="column">1</div>
<div class="column">1</div>
<div class="column">1</div>
<div class="column">1</div>
<div class="column">1</div>
<div class="column">1</div>
<div class="column">1</div>
<div class="column">1</div>
<div class="column">1</div>
<div class="column">1</div>

CSS

div{
  height:100px;
  margin-bottom:10px;
  background:red;
}
.swoosh{
  background:blue;
}

JavaScript

function isElementInViewport(el) {
    // from http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
    var rect = el.getBoundingClientRect();

    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document. documentElement.clientHeight) && /*or $(window).height() */
        rect.right <= (window.innerWidth || document. documentElement.clientWidth) /*or $(window).width() */
        );
}

$.fn.checkViewportAndSetClass = function() {
  $(this).each(function(){
    if (isElementInViewport(this)) {
      $(this).addClass("swoosh");
    } 
  });
};
$('.column').checkViewportAndSetClass();

$(window).on("scroll", function() {
    $('.column').checkViewportAndSetClass();
});