<div class="container">
  <section class="section section--placehoder">
    <h2>Lorem ipsum dolor sit amet consectetur adipisicing eli</h2>
    <p>Ullam, soluta quo ab deleniti, rem explicabo consequuntur assumenda ex nobis a optio labore fugiat molestias voluptatum. Sapiente minima sunt eius quasi reiciendis eveniet quam sit ea porro, qui dolores eos totam, aliquid, perspiciatis esse voluptas perferendis. Est quod dolor dolore tenetur?</p>
  </section>

  <section class="section section--cliped">
    <div class="section__item section__item--show">
      <img class="section__image" src="https://images.unsplash.com/photo-1573865526739-10659fec78a5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80" alt="">
      </div>
    <div class="section__item">
      <img class="section__image" src="https://images.unsplash.com/photo-1591510939462-a90a753b0329?ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80" alt="">
    </div>
    <div class="section__item">
      <img class="section__image" src="https://images.unsplash.com/photo-1460572894071-bde5697f7197?ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80" alt="">
      </div>
    <div class="section__item">
      <img class="section__image" src="https://images.unsplash.com/photo-1496890666403-e6cf521841e6?ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80" alt="">
      </div>
  </section>

  <section class="section section--placehoder">
    <h2>Lorem ipsum dolor sit amet consectetur adipisicing eli</h2>
    <p>Ullam, soluta quo ab deleniti, rem explicabo consequuntur assumenda ex nobis a optio labore fugiat molestias voluptatum. Sapiente minima sunt eius quasi reiciendis eveniet quam sit ea porro, qui dolores eos totam, aliquid, perspiciatis esse voluptas perferendis. Est quod dolor dolore tenetur?</p>
    <p>Ullam, soluta quo ab deleniti, rem explicabo consequuntur assumenda ex nobis a optio labore fugiat molestias voluptatum. Sapiente minima sunt eius quasi reiciendis eveniet quam sit ea porro, qui dolores eos totam, aliquid, perspiciatis esse voluptas perferendis. Est quod dolor dolore tenetur?</p>
    <p>Ullam, soluta quo ab deleniti, rem explicabo consequuntur assumenda ex nobis a optio labore fugiat molestias voluptatum. Sapiente minima sunt eius quasi reiciendis eveniet quam sit ea porro, qui dolores eos totam, aliquid, perspiciatis esse voluptas perferendis. Est quod dolor dolore tenetur?</p>
  </section>
  
</div>

:root {
  --scroll-width: 17px;
}

body {
  margin: 0;
}

.container {
  width: 80%;
  margin: 0 auto;
}

.section--cliped {
  position: relative;
  clip-path: inset(-100vh 0);
  transition: clip-path 0.5s;
  height: calc(var(--vh, 1vh) * 400);
}

.section--uncliped {
  clip-path: inset(-100vh calc(50% - 50vw + var(--scroll-width) / 2));
}

.section--uncliped .section__item {
  position: fixed;
  top: 0;
  left: 0;
}

.section__item {
  width: calc(100vw - var(--scroll-width));
  height: calc(var(--vh, 1vh) * 100);
  margin-left: calc(50% - 50vw + var(--scroll-width) / 2);
  opacity: 0;
  transition: opacity 1s;
}

.section__item--show {
  opacity: 1;
}

.section__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section--placehoder h2 {
  font-size: 4em;
}

.section--placehoder p {
  font-size: 2em;
}

const clipedSection = document.querySelector(".section--cliped");
const items = [
  ...document.querySelectorAll(".section--cliped > .section__item")
];

const controller = new ScrollMagic.Controller();

new ScrollMagic.Scene({
  offset: 0,
  triggerHook: 0,
  triggerElement: clipedSection,
  duration: (items.length - 1) * 100 + "%"
})
  // .addIndicators() // add indicators (requires plugin)
  .setClassToggle(clipedSection, "section--uncliped")
  .on("progress", (e) => {
    const idx = Math.min(
      Math.floor(e.progress * items.length),
      items.length - 1
    );

    items[idx].classList.add("section__item--show");

    if (e.scrollDirection === "REVERSE" && idx < items.length - 1) {
      items[idx + 1].classList.remove("section__item--show");
    }
  })
  .addTo(controller);

// =====================
function update() {
  const sbw =
    window.innerWidth - (document.documentElement || document.body).clientWidth;

  document.body.style.setProperty("--scroll-width", sbw + "px");
  document.body.style.setProperty("--vh", window.innerHeight * 0.01 + "px");
}

update();
window.addEventListener("resize", update);