<div class="wrapper">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil officia quos temporibus sed consequatur eum aliquam laudantium excepturi. Totam rem assumenda temporibus dolorum tempora quos! Tempore qui vitae ea consectetur?</p>

  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil officia quos temporibus sed consequatur eum aliquam laudantium excepturi. Totam rem assumenda temporibus dolorum tempora quos! Tempore qui vitae ea consectetur?</p>

  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil officia quos temporibus sed consequatur eum aliquam laudantium excepturi. Totam rem assumenda temporibus dolorum tempora quos! Tempore qui vitae ea consectetur?</p>

  <img src="https://via.placeholder.com/600x300" alt="">

  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil officia quos temporibus sed consequatur eum aliquam laudantium excepturi. Totam rem assumenda temporibus dolorum tempora quos! Tempore qui vitae ea consectetur?</p>

  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil officia quos temporibus sed consequatur eum aliquam laudantium excepturi. Totam rem assumenda temporibus dolorum tempora quos! Tempore qui vitae ea consectetur?</p>

  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil officia quos temporibus sed consequatur eum aliquam laudantium excepturi. Totam rem assumenda temporibus dolorum tempora quos! Tempore qui vitae ea consectetur?</p>

  <img src="https://via.placeholder.com/600x300" alt="">

  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil officia quos temporibus sed consequatur eum aliquam laudantium excepturi. Totam rem assumenda temporibus dolorum tempora quos! Tempore qui vitae ea consectetur?</p>

  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil officia quos temporibus sed consequatur eum aliquam laudantium excepturi. Totam rem assumenda temporibus dolorum tempora quos! Tempore qui vitae ea consectetur?</p>

  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil officia quos temporibus sed consequatur eum aliquam laudantium excepturi. Totam rem assumenda temporibus dolorum tempora quos! Tempore qui vitae ea consectetur?</p>

  <img src="https://via.placeholder.com/600x300" alt="">

  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil officia quos temporibus sed consequatur eum aliquam laudantium excepturi. Totam rem assumenda temporibus dolorum tempora quos! Tempore qui vitae ea consectetur?</p>

  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil officia quos temporibus sed consequatur eum aliquam laudantium excepturi. Totam rem assumenda temporibus dolorum tempora quos! Tempore qui vitae ea consectetur?</p>

  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil officia quos temporibus sed consequatur eum aliquam laudantium excepturi. Totam rem assumenda temporibus dolorum tempora quos! Tempore qui vitae ea consectetur?</p>

  <img src="https://via.placeholder.com/600x300" alt="">

</div>

.item {
  display: none;
  height: 250px;
  background-color: #7777e9;
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
  transition: 0.3s ease-out;
}

.wrapper {
  max-width: 744px;
  margin: 2rem auto;

  > * + * {
    margin-top: 1.5rem;
  }

  img {
    --inset-top: 0;
    --inset-right: 0;
    --inset-bottom: 0;
    --inset-left: 100%;
    width: 100%;
    height: 300px;
    height: auto;
    clip-path: inset(
      var(--inset-top) var(--inset-right) var(--inset-bottom) var(--inset-left)
    );
    transition: 0.8s ease-in;

    &.is-visible {
      --inset-left: 0;
    }
  }
}

body {
  font-family: "system-ui";
  line-height: 1.4;
  padding: 1rem;
  background-color: #f7f7f7;
}

* {
  box-sizing: border-box;
}

const images = document.querySelectorAll("img");

function check(entries) {
  entries.map((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add("is-visible");
      observer.unobserve(entry.target);
    }
  });
}

const observer = new IntersectionObserver(check);

images.forEach((image) => observer.observe(image));