JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slick-slide">
  This is a slide!
</div>
<div class="slick-slide">
  This is a slide!
</div>
<div class="slick-slide">
  This is a slide!
</div>
<div class="slick-slide">
  This is a slide!
</div>
<div class="slick-slide">
  This is a slide!
</div>
<div class="slick-slide">
  This is a slide!
</div>
<div class="slick-slide">
  This is a slide!
</div>

CSS

html, body {
  width:100%;
  height:100%;
}
.slick-slide {
    height:100%;  
  display:flex;
  align-items:center;
  justify-content:center;
  background:tomato;
  color:#fff;
}
.slick-slide:nth-child(odd) {
  opacity:0;
  background:blue;
  border-bottom:5px solid #fff;
}
.slick-slide.anim:nth-child(odd) {
  -webkit-animation-name: fadeInLeft;
  -moz-animation-name: fadeInLeft;
  -o-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  /* -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s; */
  -o-animation-duration: 1s;
  animation-delay: 1s;
  -webkit-animation-fill-mode:forwards;
  animation-fill-mode:forwards;  
}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translatex(-10px);
    -moz-transform: translatex(-10px);
    -o-transform: translatex(-10px);
    transform: translatex(-10px);
  }
  to {
    opacity: 1;
    -webkit-transform: translatex(0);
    -moz-transform: translatex(0);
    -o-transform: translatex(0);
    transform: translatex(0);
  }
}

@-moz-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translatex(-10px);
    -moz-transform: translatex(-10px);
    -o-transform: translatex(-10px);
    transform: translatex(-10px);
  }
  to {
    opacity: 1;
    -webkit-transform: translatex(0);
    -moz-transform: translatex(0);
    -o-transform: translatex(0);
    transform: translatex(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translatex(-100px);
    -moz-transform: translatex(-100px);
    -o-transform: translatex(-100px);
    transform: translatex(-100px);
  }
  to {
    opacity: 1;
    -webkit-transform: translatex(0);
    -moz-transform: translatex(0);
    -o-transform: translatex(0);
    transform: translatex(0);
  }
}

JavaScript

$(window).on('load scroll', function() {
	var scrollTop = $(window).scrollTop(),
  		windowHeight = $(window).height(),
      threshold = 200;
  
  $('.slick-slide:nth-child(odd)').each(function() {
		var offTop=$(this).offset().top;
    if ((scrollTop+windowHeight) > offTop) { // you can add -threshold here as scrollTop+windowHeight-threshold in pixels
    $(this).addClass('anim');
    }
  });
});