<div class="container">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit praesentium atque labore mollitia sunt minus at saepe, quam animi eius quidem hic pariatur ab omnis et. Est neque quaerat officia explicabo obcaecati fugit adipisci laborum expedita ipsum? Cupiditate, explicabo. Quasi dolor iusto laboriosam dolorum, consectetur explicabo debitis et officia molestias rem sint nesciunt saepe? Corporis provident laboriosam inventore expedita corrupti id? Maiores voluptatibus ducimus harum, reprehenderit consectetur facilis dolorem ad repellat enim ullam ipsa voluptatum quasi. Architecto suscipit deleniti quo rerum earum reiciendis amet debitis ab et magnam, sint blanditiis exercitationem, quia aut numquam porro delectus repellat, laudantium sed. Repellat.</p>
</div>

<div class="container">
  <div class="left-side">
    <ul class="content-list">
      <li class="content-list__item">1 Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores, repellat atque vero sequi voluptate qui labore libero nulla est fuga adipisci sint doloribus officiis animi, ipsum ipsam, voluptatum dolorum laborum!</li>
      <li class="content-list__item">2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus id libero voluptatibus perspiciatis, corporis quidem recusandae eum minima vitae amet ipsa facere officia dolorem repellat quae numquam sequi voluptas ab.</li>
      <li class="content-list__item">3 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad mollitia aliquam culpa minus optio quaerat magnam velit voluptatem nesciunt facilis itaque ea odit, eveniet earum, provident quo rerum, sunt unde?</li>
      <li class="content-list__item">4 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad mollitia aliquam culpa minus optio quaerat magnam velit voluptatem nesciunt facilis itaque ea odit, eveniet earum, provident quo rerum, sunt unde?</li>
      <li class="content-list__item">5 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad mollitia aliquam culpa minus optio quaerat magnam velit voluptatem nesciunt facilis itaque ea odit, eveniet earum, provident quo rerum, sunt unde?</li>
      <li class="content-list__item">6 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad mollitia aliquam culpa minus optio quaerat magnam velit voluptatem nesciunt facilis itaque ea odit, eveniet earum, provident quo rerum, sunt unde?</li>
      <li class="content-list__item">7 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad mollitia aliquam culpa minus optio quaerat magnam velit voluptatem nesciunt facilis itaque ea odit, eveniet earum, provident quo rerum, sunt unde?</li>
      <li class="content-list__item">8 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad mollitia aliquam culpa minus optio quaerat magnam velit voluptatem nesciunt facilis itaque ea odit, eveniet earum, provident quo rerum, sunt unde?</li>
      <li class="content-list__item">9 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad mollitia aliquam culpa minus optio quaerat magnam velit voluptatem nesciunt facilis itaque ea odit, eveniet earum, provident quo rerum, sunt unde?</li>
      <li class="content-list__item">10 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad mollitia aliquam culpa minus optio quaerat magnam velit voluptatem nesciunt facilis itaque ea odit, eveniet earum, provident quo rerum, sunt unde?</li>
    </ul>
  </div>
  <div class="right-side">
    <ul class="slides-list">
      <li class="slides-list__item"><img src="//placehold.it/300x300/f44336?text=1" alt=""></li>
      <li class="slides-list__item"><img src="//placehold.it/300x300/e91e63?text=2" alt=""></li>
      <li class="slides-list__item"><img src="//placehold.it/300x300/9c27b0?text=3" alt=""></li>
      <li class="slides-list__item"><img src="//placehold.it/300x300/3f51b5?text=4" alt=""></li>
      <li class="slides-list__item"><img src="//placehold.it/300x300/2196f3?text=5" alt=""></li>
      <li class="slides-list__item"><img src="//placehold.it/300x300/00bcd4?text=6" alt=""></li>
      <li class="slides-list__item"><img src="//placehold.it/300x300/009688?text=7" alt=""></li>
      <li class="slides-list__item"><img src="//placehold.it/300x300/4caf50?text=8" alt=""></li>
      <li class="slides-list__item"><img src="//placehold.it/300x300/ffeb3b?text=9" alt=""></li>
      <li class="slides-list__item"><img src="//placehold.it/300x300/ff9800?text=10" alt=""></li>
    </ul>
  </div>
</div>

<div class="container">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit praesentium atque labore mollitia sunt minus at saepe, quam animi eius quidem hic pariatur ab omnis et. Est neque quaerat officia explicabo obcaecati fugit adipisci laborum expedita ipsum? Cupiditate, explicabo. Quasi dolor iusto laboriosam dolorum, consectetur explicabo debitis et officia molestias rem sint nesciunt saepe? Corporis provident laboriosam inventore expedita corrupti id? Maiores voluptatibus ducimus harum, reprehenderit consectetur facilis dolorem ad repellat enim ullam ipsa voluptatum quasi. Architecto suscipit deleniti quo rerum earum reiciendis amet debitis ab et magnam, sint blanditiis exercitationem, quia aut numquam porro delectus repellat, laudantium sed. Repellat.</p>
</div>

* {
  box-sizing: border-box;
}

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

img {
  max-width: 100%;
}
.container {
  display: flex;
}

.left-side, .right-side {
  width: 50%;
  overflow: hidden;
}

.content-list, .slides-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.content-list__item {
  display: flex;
  align-items: center;
  background-color: #222;
  color: #eee;
  height: 100vh;
  padding: 15px;
}

.content-list__item:nth-child(even) {
  background-color: #eee;
  color: #222;
}

.slides-list {
  display: flex;
}

.slides-list__item {
  flex: 0 0 200%;
  height: 100vh;
}

.slides-list__item img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}

const controller = new ScrollMagic.Controller();
const contentList = document.querySelector(".content-list");
const slidesList = document.querySelector(".slides-list");

const scene = new ScrollMagic.Scene({
  triggerElement: contentList,
  triggerHook: 0.5
})
  .addIndicators() // add indicators (requires plugin)
  .addTo(controller);

scene.on("update", onUpdate);

function onUpdate(e) {
  const chc = contentList.childElementCount;

  const scrollY =
    (chc * (e.scrollPos - e.startPos)) / contentList.clientHeight;
  
  const pct = clamp(scrollY, 0.5, chc - 0.5);
  const tx = -pct * 200 + 50;
  const ty = pct * 100 - 50;

  slidesList.style.transform = `translate(${tx}%, ${ty}%)`;
}

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