Applying scroll-snap-type on view-timeline based animated scroll

TL;DR: in this jsfiddle https://jsfiddle.net/kLp728xw/, I want to apply scroll-snap not only on vertical scroll as it already does, but also on horizontal scroll where the number 1~5 is shown.

I want to apply scroll-snap effect on contents that are animated with @keyframes horizontally like slideshow, along view-timeline. The horizontal scroll part code from the jsfiddle is shown below. I simply tried to add scroll-snap-type: mandatory, overflow: scroll, and scroll-snap-align: start like we normally do, but couldn't get it working.

Is this possible first of all? If not, can you guys think of any workaround perhaps using JavaScript? (was wondering I can utilize IntersectionObserver for example.)

What I want as a baseline is the "hybrid scrolling" - as shown in fiddle, vertical and horizontal mixed scrolling - with scroll snap. If the current jsfiddle code is already stepping toward deadend, I'd love to know how to implement from the scratch zero base.

<!-- HTML -->
<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>

/* CSS */
.section.pin {
  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;
}

Ended up having invisible elements in the vertical scroll container with scroll-snaps.