JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="paddings">
</div>
<div id="circle" class="animate"></div>

CSS

#circle {
  background: #bf1e2c;
  width: 300px;
  height: 300px;
  border-radius: 100%;
  position: absolute;
  top: 25px;
}

.animate{
    opacity:0;
}
#paddings {
  padding-top: 800px;
}

JavaScript

$(document).ready(function() {

/* Every time the window is scrolled ... */
$(window).scroll( function(){

    /* Check the location of each desired element */
    $('.animate').each( function(i){

        var bottom_of_object = $(this).offset().top + $(this).outerHeight();
        var bottom_of_window = $(window).scrollTop() + $(window).height();

        /* If the object is completely visible in the window, fade it in */
        if( bottom_of_window > bottom_of_object ){

            $(this).animate({'opacity':'1'},500);

        }

    }); 

});
});