JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/noframework.waypoints.min.js"></script>
<div class="slides">
  <section class="Scrn Scrn_1 active">Lorem-1</section>
  <section class="Scrn Scrn_2">Ipsum-2</section>
  <section class="Scrn Scrn_3">Dolor-3</section>
  <section class="Scrn Scrn_4">Sit-4</section>
  <section class="Scrn Scrn_5">Amet-5</section>
</div>

CSS

body {
  margin: 0;
  overflow: hidden;
}

.slides {
  position: relative;
  width: 100%;
  height: 100vh;
}

.Scrn {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100vh;
}

.Scrn_1 {
  background-color: green;
}

.Scrn_2 {
  background-color: red;
}

.Scrn_3 {
  background-color: blue;
}

.Scrn_4 {
  background-color: aquamarine;
}

.Scrn_5 {
  background-color: purple;
}

.active {
  position: relative;
  z-index: 2;
  transform: translate3d(0px, 0%, 0px);
}

.next {
  z-index: 1;
  transform: translate3d(0px, 0%, 0px);
}

.prev {
  z-index: 3;
  transform: translate3d(0px, -100%, 0px);
}

.animate {
  transition: transform 0.5s ease-in-out;
}

JavaScript

let activeEl = document.querySelector('.active');
let nextEl = activeEl.nextElementSibling;
let prevEl = activeEl.previousElementSibling;

if (nextEl) nextEl.classList.add('next');
if (prevEl) prevEl.classList.add('prev');

function toggleActive(direction) {
  activeEl.classList.remove('active');
  activeEl.classList.remove('animate');

  if (prevEl) {
  	prevEl.classList.remove('prev');
    prevEl.classList.remove('animate');
  }
  
  if (nextEl) nextEl.classList.remove('next');

  if (direction === 'down') {
    activeEl = nextEl;
    if (activeEl.previousElementSibling) {
      activeEl.previousElementSibling.classList.add('animate');
    }
  } else {
    activeEl = prevEl;
    activeEl.classList.add('animate');
  }
 
  nextEl = activeEl.nextElementSibling;
  prevEl = activeEl.previousElementSibling;
  
	activeEl.classList.add('active');
  if (nextEl) nextEl.classList.add('next');
  if (prevEl) prevEl.classList.add('prev');

}

window.addEventListener('mousewheel', function(event) {
  if (event.deltaY > 0 && activeEl.nextElementSibling) { //scroll down
    toggleActive('down');
  }
  else if (event.deltaY < 0 && activeEl.previousElementSibling) { //scroll up
    toggleActive('up');
  }
});