JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>


<div class="section">Start scrolling down!</div>
    <div class="section">slide 1</div>
    <div class="nested">
      <div class="section first">slide 2</div>
      <div class="section second">slide 3</div>
      <div class="section third">slide 4</div>    
    </div>
    <div class="section">slide 5</div>
    <div class="section">slide 6</div>

CSS

body {
    width: 100%;
    height: 7500px;
    background: linear-gradient(to bottom, #ffcb77 0%, #deaaff 100%);
}




.section{
    width: 100%;
    height: 100vh;
    text-align: center;
    position: relative;
    border: 1px solid red;
}

.sticky{
    position: fixed;
    z-index: 1;
    top: 0;
    width: 9999px;
    height: 100vh;
    background: green;
    overflow: hidden;
}


.sticky .section{
  float: left;
  width: 400px;
}

JavaScript

/*
capture the mouse wheel event, 
prevent the browser scrolling, and then use scrollBy and/or scrollTop to scroll the height of your slide (you can get the height this way: Math.max(document.documentElement.clientHeight, window.innerHeight || 0)). 

This way you will face a lot of corner cases and cross-platform problems so I recommend to use the other approach.

*/



	  var $nested = $('.nested');
	  var $win = $(window);

	  $nested.waypoint(function(direction) {
	    console.log("direction", direction);
      
      if (direction == 'down') {
	      console.log("pause and slide right");
        $nested.addClass("sticky");
        
        
        
    var $win = $(window);
    
    $win.on('scroll', function() {
			var top = $win.scrollTop() / 3;
			console.log("top", top);
			//$nested.css('transform', 'rotate( ' + top + 'deg'+')');
      
      $nested.css('transform', 'translate(' + -top + 'px, 0)');
		});

        
        
	      //scroll width -- pause vertical scroll and scroll right - end slide
        //$dipper.addClass("js-dipper-animate");
	    } else {
	      console.log("pause and slide left");
        $nested.removeClass("sticky");
	     	//scroll width - pause vertical scroll and scroll left - start slide
        //$dipper.removeClass("js-dipper-animate");
	    }
	  }, {
	    offset: '50%'
	  });





$(window).scroll(function () {
    
    /*
    if ($(this).scrollTop() > 1500 && $(this).scrollTop() < 3000) {
        firstAnimation();
    }
    if ($(this).scrollTop() > 3000 && $(this).scrollTop() < 4500) {
        secondAnimation();
    }
    if ($(this).scrollTop() > 4500 && $(this).scrollTop() < 6000) {
        thirdAnimation();
    }
    if ($(this).scrollTop() > 6000) {
        fourthAnimation();
    }
    */
    
});