JSFiddle - React, Tailwind, and code Playground

HTML

<div class="root">
      <div class="section">
        <div style="display:flex;justify-content:center;font-size:8rem;">hello</div>
      </div>

      <div class="section pin">
        <div class="sticky">
          <div class="slides">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
          </div>
        </div>
      </div>

      <div class="section">
         <div style="display:flex;justify-content:center;font-size:8rem;">bye</div>
      </div>
    </div>

CSS

body {
  padding: 0;
  margin: 0;
}

* {
  box-sizing: border-box;
}

.root {
  width: 100vw;
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.section {
  scroll-snap-align: start;
  height: 100vh;
}

.section.pin {
  scroll-snap-align: start;
  height: 500vh;

  view-timeline-name: --section-pin;
  view-timeline-axis: block;
}

.sticky {
  height: 100vh;
  width: 100vw;
  position: sticky;
  top: 0;
}

.slides {
  height: 100vh;
  width: 400vw;

  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;

  animation: horizontalScroll linear both;
  animation-timeline: --section-pin;
  animation-range: contain 0%;
}

@keyframes horizontalScroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

.item {
  width: 100vw;
  min-width: 100vw;
  height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10rem;
}

.item:nth-child(1) {
  background-color: lightblue;
}
.item:nth-child(2) {
  background-color: lightpink;
}
.item:nth-child(3) {
  background-color: lightgreen;
}
.item:nth-child(4) {
  background-color: lightsalmon;
}
.item:nth-child(5) {
  background-color: gray;
}