<section>
  <figure>
    <img src="https://images.unsplash.com/photo-1543852786-1cf6624b9987?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="">
  </figure>
  <div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi nulla incidunt, cumque provident dolorem reiciendis voluptates quis est architecto aperiam nam, earum ullam sunt! Harum nesciunt ab tenetur doloremque quam veniam fugiat possimus, porro nemo deserunt alias vel dolore ex sit in neque! Tenetur eaque placeat nulla, voluptas illo eius? Odit quia omnis aperiam, impedit, nesciunt dolore repellendus non voluptatum unde ullam quam soluta recusandae expedita eum hic ex reiciendis maiores vero dolorum itaque delectus consectetur, accusantium culpa nihil. Similique esse facere eligendi corporis molestias dicta omnis id, dolore minima aperiam velit tempore tenetur ex. Doloribus aliquam soluta odit error?</div>
</section>

body {
  margin: 0;
  height: 500vh;
}

section {
  width: 50%;
  margin: 0 auto;
  margin-top: 70vh;
  outline: 2px dashed cyan;
}

figure {
  margin: 0;
  position: relative;
  padding-bottom: 56.25%; /* aspect ratio 16:9 */
  overflow: hidden;
  margin-bottom: 25px;
}

img {
  position: absolute;
  display: block;
  width: 100%;
}

const controller = new ScrollMagic.Controller();
const content = document.querySelector(".content");
const image = document.querySelector("img");
const figure = document.querySelector("figure");
const section = document.querySelector("section");

new ScrollMagic.Scene({
  triggerElement: section,
  triggerHook: 0.5,
  duration: () => section.clientHeight
})
  .addIndicators() // add indicators (requires plugin)
  .addTo(controller)
  .on("progress", onProgress);


function onProgress(e) {
  const ty = e.progress * (figure.clientHeight - image.clientHeight);
  image.style.transform = `translateY(${ty}px)`;
}