JSFiddle - React, Tailwind, and code Playground

by xxxvvvxxx

HTML

<div id="container">
	<div class="slideinleft">slide</div>
	<div class="slideinleft">slide</div>
	<div class="slideinleft">slide</div>
</div>

CSS

*{list-style: none; margin: 0; padding: 0;}
/* .hideme{width:100%;height: 220px; opacity: 0;background-color:blueviolet; } */
.slideinleft{margin-left: -300px; max-width: 100%;background-color: aqua;}
body {
	height: 2000px;
}
#container {
	position: sticky;
	top:0;
}

JavaScript

$(document).ready(function(){
    $(window).scroll(function(){
        $('.slideinleft').each(function(i){
           var bottom_of_element = $(this).offset().top + $(this).outerHeight();
           var bottom_of_window = $(window).scrollTop() + $(window).height();
           if(bottom_of_window > bottom_of_element){
                $(this).animate({'margin-left':'0px'},1000);
           } 
        });
    });
});