Как анимировать изображение по горизонтали при вертикальной прокрутке страницы

Question

Я использую JS для перемещения изображений по горизонтали между разделами страницы, когда пользователь прокручивает страницу вниз. Мой подход состоит в том, чтобы установить их margin-left равными window.scrollY. Однако, , как вы можете видеть в моей ссылке CodePen , это означает, что второе изображение, когда оно активируется, захватывает горизонтальное положение первого изображения. Я хочу, чтобы каждое изображение слайдера было независимым, чтобы каждое из них стекало с правой стороны страницы в разном темпе относительно их порядка на странице. Кто-нибудь может дать мне совет, как решить эту проблему?

// this snippet controls how often the function runs, so that it doesn't run an insane amount of times
function debounce(func, wait = 2, immediate = true) {
  var timeout;
  return function() {
    var context = this,
      args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
}

const sliders = document.querySelectorAll(".sliders");

function checkSlide(e) {
  sliders.forEach(slider => {

    // my console logs
    // console.log(window.innerHeight)

    // halfway through the image, start
    const slideInAt =
      window.scrollY + window.innerHeight - slider.height / 1

    // bottom of the image, 
    const imageBottom = slider.offsetTop + slider.height;

    // 
    const isHalfShown = slideInAt > slider.offsetTop;

    const isNotScrolledPast = window.scrollY < imageBottom;

    if (isHalfShown && isNotScrolledPast) {
      // sliderImage.classList.add("active");
      slider.style.marginLeft = (window.scrollY) + "px"
    } else {
      // sliderImage.classList.remove("active");
      slider.style.marginLeft = "0px"
    }
  });
}

window.addEventListener("scroll", debounce(checkSlide))

.frame {
  background-color: lightgray;
  width: 500px;
  /*height: 200vh;*/
  margin: auto;
  padding: 20px;
}

.scrollImage {
  width: 70px;
  height: 70px;
  margin: 5px;
  mix-blend-mode: darken;
}

<div class="frame">
  <h1>Welcome</h1>
  <p>Consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur
    pariaturlores sunt esse magni, ut, dignissimos.</p>
  <p>Lorem ipsum cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni,
    ut, dignissimos.</p>
  <p>Adipisicing elit. Tempore tempora rerum..</p>
  <p>Consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur
    pariaturlores sunt esse magni, ut, dignissimos.</p>

  <img src="https://image.freepik.com/free-icon/sail-boat_318-1522.jpg" class="scrollImage sliders" />

  <p>Lorem ipsum cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni,
    ut, dignissimos.</p>
  <p>Adipisicing elit. Tempore tempora rerum..</p>

  <img src="https://image.freepik.com/free-icon/sail-boat_318-1522.jpg" class="scrollImage sliders" />

</div>