JSFiddle - React, Tailwind, and code Playground
HTML
<div class="obsah"></div>
CSS
body{
overflow-x: hidden;
}
.obsah {
width: 50%;
height: 200px;
background: pink;
margin: 500px auto;
transform: translateX(100%);
opacity: 0;
transition: all 0.5s ease-in-out;
}
.slideInRight {
transform: translateX(0);
opacity: 1;
}
JavaScript
var et = $('.obsah').offset().top;
var st = $(window).scrollTop();
var offset = 100;
$(window).scroll(function() {
st = $(window).scrollTop();
if ((st + offset > et) && (st - offset < et)) {
$('.obsah').addClass('slideInRight');
}
});