<section class="lorem">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum tenetur expedita deleniti blanditiis eveniet, molestiae distinctio harum unde ad? Corporis perferendis cum illum sint fugiat quidem placeat iste esse voluptatum nihil voluptatem, asperiores aliquid nesciunt minima maxime molestias sit veritatis. Distinctio, explicabo ad. Nisi quod consectetur, reiciendis enim ipsum ab harum beatae totam repudiandae, veritatis maiores iusto. Fugiat molestias maxime optio ratione expedita odit laborum quaerat et repellat, dolorum quidem beatae architecto odio eaque vero modi eum obcaecati dolorem consequatur dignissimos itaque. Dolorem molestias, maiores quasi ducimus reprehenderit at aliquid sint vitae, deleniti asperiores nesciunt magnam, magni earum nemo neque?
</section>

<section class="photos">
  <div class="photos__desc">
    <h2 class="photos__title">Lorem ipsum dolor, sit amet</h2>
    <div class="photos__text">Adipisci id modi voluptas cum nobis sint quaerat magni. Numquam id in deleniti fuga obcaecati voluptatum fugiat sit ipsa, quibusdam qui illo amet tempore laboriosam facilis sed magni! Impedit voluptates est consequuntur incidunt excepturi aut nisi, ducimus soluta delectus ad voluptatibus quae.</div>
  </div>

  <div class="photos__slider">
    <div class="photos__slider-track photos__slider-track--1">
      <img class="photos__slider-image" src="//placehold.it/300x600" alt="">
      <img class="photos__slider-image" src="//placehold.it/300x600" alt="">
      <img class="photos__slider-image" src="//placehold.it/300x600" alt="">
      <img class="photos__slider-image" src="//placehold.it/300x600" alt="">
      <img class="photos__slider-image" src="//placehold.it/300x600" alt="">
      <img class="photos__slider-image" src="//placehold.it/300x600" alt="">
      <img class="photos__slider-image" src="//placehold.it/300x600" alt="">
    </div>
    <div class="photos__slider-track photos__slider-track--2">
      <img class="photos__slider-image" src="//placehold.it/300x600" alt="">
      <img class="photos__slider-image" src="//placehold.it/300x600" alt="">
      <img class="photos__slider-image" src="//placehold.it/300x600" alt="">
      <img class="photos__slider-image" src="//placehold.it/300x600" alt="">
      <img class="photos__slider-image" src="//placehold.it/300x600" alt="">
      <img class="photos__slider-image" src="//placehold.it/300x600" alt="">
      <img class="photos__slider-image" src="//placehold.it/300x600" alt="">
    </div>
  </div>
</section>

<section class="lorem">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum tenetur expedita deleniti blanditiis eveniet, molestiae distinctio harum unde ad? Corporis perferendis cum illum sint fugiat quidem placeat iste esse voluptatum nihil voluptatem, asperiores aliquid nesciunt minima maxime molestias sit veritatis. Distinctio, explicabo ad. Nisi quod consectetur, reiciendis enim ipsum ab harum beatae totam repudiandae, veritatis maiores iusto. Fugiat molestias maxime optio ratione expedita odit laborum quaerat et repellat, dolorum quidem beatae architecto odio eaque vero modi eum obcaecati dolorem consequatur dignissimos itaque. Dolorem molestias, maiores quasi ducimus reprehenderit at aliquid sint vitae, deleniti asperiores nesciunt magnam, magni earum nemo neque?
</section>

<section class="lorem">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum tenetur expedita deleniti blanditiis eveniet, molestiae distinctio harum unde ad? Corporis perferendis cum illum sint fugiat quidem placeat iste esse voluptatum nihil voluptatem, asperiores aliquid nesciunt minima maxime molestias sit veritatis. Distinctio, explicabo ad. Nisi quod consectetur, reiciendis enim ipsum ab harum beatae totam repudiandae, veritatis maiores iusto. Fugiat molestias maxime optio ratione expedita odit laborum quaerat et repellat, dolorum quidem beatae architecto odio eaque vero modi eum obcaecati dolorem consequatur dignissimos itaque. Dolorem molestias, maiores quasi ducimus reprehenderit at aliquid sint vitae, deleniti asperiores nesciunt magnam, magni earum nemo neque?
</section>
<section class="lorem">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum tenetur expedita deleniti blanditiis eveniet, molestiae distinctio harum unde ad? Corporis perferendis cum illum sint fugiat quidem placeat iste esse voluptatum nihil voluptatem, asperiores aliquid nesciunt minima maxime molestias sit veritatis. Distinctio, explicabo ad. Nisi quod consectetur, reiciendis enim ipsum ab harum beatae totam repudiandae, veritatis maiores iusto. Fugiat molestias maxime optio ratione expedita odit laborum quaerat et repellat, dolorum quidem beatae architecto odio eaque vero modi eum obcaecati dolorem consequatur dignissimos itaque. Dolorem molestias, maiores quasi ducimus reprehenderit at aliquid sint vitae, deleniti asperiores nesciunt magnam, magni earum nemo neque?
</section>

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: sans-serif;
  line-height: 1.45;
}

.photos {
  position: relative;
  display: flex;
  align-items: flex-start;
  height: 200vh;
}

.photos__desc {
  position: sticky;
  padding: 15px;
  width: 50%;
  top: 15px;
}

.photos__slider {
  position: sticky;
  display: flex;
  justify-content: space-between;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100vh;
  overflow: hidden;
}

.photos__slider-track {
  width: calc(50% - 5px);
}

.photos__slider-image {
  display: block;
  width: 100%;
  border-radius: 20px;
}

.photos__slider-image + .photos__slider-image {
  margin-top: 10px;
}

.lorem {
  padding: 15px;
/*   font-size: 1.25rem; */
}

function clamp(min, max, val) {
  return Math.min(Math.max(val, min), max);
}

const photos = document.querySelector(".photos");
const track1 = document.querySelector(".photos__slider-track--1");
const track2 = document.querySelector(".photos__slider-track--2");

let pp = 0;
let sp = 0;
window.addEventListener("scroll", () => {
  sp = clamp(0, 1, (window.scrollY - photos.offsetTop) / photos.offsetHeight);
});

window.dispatchEvent(new Event("scroll"));

function rafLoop() {
  pp = pp + (sp - pp) * 0.08;
  track1.style.transform = `translate3d(0, ${-100 * pp}%, 0)`;
  track2.style.transform = `translate3d(0, ${-100 * (1 - pp)}%, 0)`;
  requestAnimationFrame(rafLoop);
}

requestAnimationFrame(rafLoop);