JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.com/imakewebthings/jquery-waypoints/blob/master/waypoints.js"></script>
<script src="https://raw.githubusercontent.com/imakewebthings/jquery-waypoints/master/waypoints.js"></script>
<li id="span">

    <img class="logo"></img>
    
</li>

CSS

#span{
    height: 2000px;
    list-style: none;
}

.logo{
    width: 20%;
    height: 30%;
    background-color: blue;
    margin-left: 40%;
    position: absolute;
}

JavaScript

$('.logo').waypoint(function(event, direction) {
    // Fade in here
    $(this).fadeIn(800);
}, {
   offset: function() {
       // The bottom of the element is in view
       return $.waypoints('viewportHeight') - $(this).outerHeight();
    }
});