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: 100vw;
}

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);

  var distance = $nested.offset().top;
  var $nestedHeight = $nested.height();
  var $nestedCount = $nested.find(" > .section").length;
  var $nestedSectionWidth = $nested.next(".section").eq(0).width();


  var clearNestedWidth = $nestedSectionWidth * $nestedCount;
  var $window = $(window);

  //console.log("$nestedHeight", $nestedHeight);
  //console.log("$nestedCount", $nestedCount);
  //console.log("$nestedSectionWidth", $nestedSectionWidth);
  //console.log("clearNestedWidth", clearNestedWidth);

  $window.scroll(function() {
    if ($window.scrollTop() >= distance) {
      // Your div has reached the top        
      $nested.addClass("sticky");

      var $nestedCompactWidth = $nested.width();
 //     console.log("$nestedCompactWidth", $nestedCompactWidth);

      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)');

  //      console.log("clearNestedWidth", clearNestedWidth);
   //     console.log("top", top);
        if (top >= clearNestedWidth) {
          console.log("cleared slides - now clear sticky")
          $nested.removeClass("sticky");
          
          $nested.css('height', $nestedHeight);
          //set scroll to end of slide 2
          
          //$nestedHeight distance
        }
        
        
      });





    } else {
...