JSFiddle - React, Tailwind, and code Playground

HTML

<div class="hideme">1</div>
<div class="hideme">2</div>
<div class="hideme">3</div>
<div class="hideme">4</div>
<div class="hideme">5</div>
<div class="hideme">6</div>
<div class="hideme">7</div>
<div class="hideme">8</div>
<div class="hideme">9</div>

CSS

.container {
    
}
.hideme{
    height: 150px;
    width:150px;
    background: #000;
    margin-bottom: 10px;
    /* display:none; */
    opacity: 0;
    color:#fff;
}

JavaScript

var scrollPos = $(window).scrollTop() + $(window).height();

$('.hideme').each(function(i) {
    var elemPos = $(this).position().top + $(this).outerHeight();
    if( scrollPos > elemPos ){
        $(this).animate({'opacity': 1}, 3000);
  	}
})

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