JSFiddle - React, Tailwind, and code Playground

HTML

<div class="showme">First one
</div>
<div class="hideme second">2nd one
</div>
<div class="hideme third">3rd one
</div>
<div class="hideme">4th one
</div>

CSS

.showme {opacity:1;height:400px;background:#00ff00}
.hideme {opacity:0;height:400px;background:#ff0000}
.second {background:#0000ff}
.third {background:#f0f0f0}

JavaScript

$(window).scroll(function () {
    $('.hideme').each(function (i) {
        var bottom_of_object = $(this).position().top + $(this).outerHeight();
        var bottom_of_window = $(window).scrollTop() + $(window).height();
        if (bottom_of_window > bottom_of_object) {
            $(this).animate({opacity: 1}, 2000);
        }
    });
});