JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="left">
    <div class="bg-1 left-item item current">111</div>
    <div class="bg-2 left-item item">222</div>
    <div class="bg-3 left-item item">333</div>
  </div>
  <div class="right">
    <div class="bg-3 right-item item">333</div>
    <div class="bg-2 right-item item">222</div>
    <div class="bg-1 right-item item current">111</div>
  </div>
</div>

CSS

* {box-sizing: border-box;}
html, body {height: 100%; overflow: hidden;}

.wrapper {
  display: flex;
  height: 100%;
  position: relative;
}

.left, .right {
  position: absolute;
  height: 100%;
}

.left-item, .right-item {
  position: absolute;
  height: 100%;
  width: 100%;
  transition: all .6s ease-out;
}

.left {width: 30%; left: 0; top: 0;}
.left .item {transform: translateY(-100%) translateZ(0px); border-right: 2px solid #000;}
.right {width: 70%; left: 30%; top: 0;}
.right .item {transform: translateY(100%) translateZ(0px);}
.item.current {transform: translateY(0%) translateZ(0px);}
.item.left-after {transform: translateY(100%) translateZ(0px);}
.item.right-after {transform: translateY(-100%) translateZ(0px);}

.item {height: 100%;}

.bg-1 {background: #58c1d2;}
.bg-2 {background: orange;}
.bg-3 {background: green;}

JavaScript

$(window).bind('mousewheel DOMMouseScroll', function(event){
	if ( $('.item').hasClass('delay') ) {return false;}
	if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
		scroll($('.right'), true);
		scroll($('.left'), false);
	}
	else {
		scroll($('.left'), true);
		scroll($('.right'), false);
	}
});

function scroll(el, kuda) {
	el.each(function() {
		var count = $(this).find('.item').length;
		var index = $(this).find('.current').index();
		var item = $(this).find('.item');
		var nextIndex;

		if (kuda) {
			item.eq(index).removeClass('current');
			if (! (index == count - 1)) {
				item.eq(index).addClass('left-after');
			}
			nextIndex = index + 1;
			if (nextIndex == count) {nextIndex = count - 1;}
		} else {
			item.eq(index).removeClass('current');
			if (! index == 0) {
				item.eq(index).addClass('right-after');
			}
			nextIndex = index - 1;
			if (nextIndex <= 0) {nextIndex = 0;}
		}
		item.eq(nextIndex).removeClass('left-after right-after').addClass('current');
		item.eq(nextIndex).addClass('delay').delay(600).queue(function(){
			$(this).removeClass("delay").dequeue();
		});
	});
}