JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cms seo animated"></div>
<div class="scrollValue">0</div>

CSS

body{
    padding:400px 0;
}
.scrollValue{
    right: 5px;
    top: 10px;
    position: fixed;
}
.cms{
    width: 300px;
    height: 300px;
    background: red;
    margin-top: 1092px;
}
.animated {
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
.fadeOutRight {
    -webkit-animation-name: fadeOutRight;
    animation-name: fadeOutRight;
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}

JavaScript

$(window).scroll(function() {
    var y=$(window).scrollTop();
    $('.scrollValue').text('scrolltop value:'+y)
    console.log(y)
    if (y < 1092 && $('.cms,.seo').hasClass('fadeInRight')){
        $('.cms,.seo').addClass('fadeOutRight').removeClass('fadeInRight');  
    }
    if (y > 1092 && y < 1300 && !$('.cms,.seo').hasClass('fadeInRight')) {
        $('.cms,.seo').addClass('fadeInRight');
    }     
    if (y > 1600){
        $('.cms,.seo').addClass('fadeOutRight').removeClass('fadeInRight');  
    }
});