JSFiddle - React, Tailwind, and code Playground

HTML

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>

CSS

div {
    width: 100%;
    height: 400px;
    margin: 10px 0;
    line-height: 400px;
    text-align: center;
    font-size: 50px;
    color: white;
    background: rebeccapurple;
    opacity: 0;
    transition: opacity 2s ease;
}

div.is-visible {
    opacity: 1;
}

JavaScript

function isScrolledIntoView(element) {
    var scrollBottomPosition = $(window).scrollTop() + $(window).height();
    return ($(element).offset().top < scrollBottomPosition);
}

function addClassIfVisible(element) {
	$(element).each(function () {      
        if (isScrolledIntoView(this)) {
          $(this).addClass('is-visible');
        }
    });
}

addClassIfVisible('div');

$(window).scroll(function () {
    addClassIfVisible('div');
});