Is there a way to create vertical fixed sections like this in CSS/JS?

I’m trying to create a similar layout where each section shows up with scroll. Is there a way to create this with CSS/JS?

https://www.youtube.com/watch?v=LF7K2zuh-H8

I tried using position fixed and sticky for sections to make this work, but it doesn’t seem to be working.

.scroll_container {
  margin-top: 800px;
  height: 1200px;
  margin-left: 20%;
  position: relative;
  overflow: hidden;
}

.scroll_container div {
  position: sticky;
  position: -webkit-sticky;
  width: 800px;
  height: 400px;
}

.scroll_1 {
  background: orange;
  top: 0px;
}

.scroll_2 {
  top: 400px;
  background: turquoise;
  z-index: 10;
}

.scroll_3 {
  top: 800px;
  background: teal;
  z-index: 20;
}

<div class="scroll_container">
  <div class="scroll_1">
    A wavelike design appears to be flowing across the canvas from left to right. At its heart lies another small cloud, indicating some kind of technological feature or product. -
  </div>

  <div class="scroll_2">
    A wavelike design appears to be flowing across the canvas from left to right. At its heart lies another small cloud, indicating some kind of technological feature or product. -
  </div>

  <div class="scroll_3">
    A wavelike design appears to be flowing across the canvas from left to right. At its heart lies another small cloud, indicating some kind of technological feature or product. -
  </div>
</div>