How can I disable reverse animation for this effect?

https://jsfiddle.net/9Lbe8kcj/

#container {
  width: 100%;
  height: 100%;
  background-color: red;
  position: relative;
}

#scroll-container-one {
  width: 1000px;
  height: 500px;
  overflow-y: scroll;
  overflow-x: hidden;
  background: green;
}

.box-one {
  height: 600px;
  background-color: purple;
  font-size: 32px;
}

.box-two {
  height: 1400px;
  position: relative;
  background-color: orange;
}

.inside-box {
  height: 500px;
  position: sticky;
  top: 0;
  background-color: white;
  display: flex;
  justify-content: space-between;
  opacity: 1;
}

.inside-box div {
  width: 300px;
  height: 200px;
  background-color: blue;
  font-size: 40px;
  animation: appear linear forwards;
  animation-timeline: view(600px);
  opacity: 0;
}

#one {
  animation-range-start: 100px;
  animation-range-end: 400px;
}

#two {
  animation-range-start: 500px;
  animation-range-end: 800px;
}

#three {
  animation-range-start: 900px;
  animation-range-end: 1200px;
}

@keyframes appear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.box-three {
  height: 1000px;
  background-color: yellow;
}
<div id="container">
  <div id="scroll-container-one">
    <div class="box-one">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, assumenda quisquam. Minus culpa quo a esse nostrum, laborum aspernatur ipsa nisi cum blanditiis facilis, minima unde soluta quos, dolorum impedit!
    </div>
    <div class="box-two">
      <div class="inside-box">
        <div id="one">abooga</div>
        <div id="two">awooga</div>
        <div id="three">asooga</div>
      </div>
    </div>
    <div class="box-three">box 3</div>
  </div>
</div>

I created an example of what I basically want. The only thing is, I wanted it so that when the user scrolls back up, they wouldn’t have to go through all the animations reversing. As well as not have to go through the entire div that contains the sticky div which is only that height so that the effect of making elements appear with each scroll can be created.

I am almost 100% sure I’ve seen this effect (with no reverse animations when scrolling back up and everything) on some websites in the past but I can’t seem to find one now that I am actively looking for one.

If anyone can link a or multiple websites that uses this effect, that would be very helpful too