reveal-scroll animations via clip-path: inset (CSS)

index.html

<section class="section">
  <div class="image-box" data-reveal="left">
    <img src="https://img.freepik.com/premium-photo/turkish-baklava-dessert_127657-21789.jpg?w=2000" alt="" class="img">
  </div>
  <div class="content-box">
    <h2 class="title" data-reveal="left">
      Baklava
    </h2>
    <p class="text" data-reveal="left">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Id laborum iste doloremque ab facere unde alias sit commodi accusamus? Eius ut molestiae nemo perspiciatis, pariatur numquam accusamus voluptatem libero sint.
    </p>
  </div>
  <div class="content-box">
    <h2 class="title" data-reveal="left">
      Turkish coffee
    </h2>
    <p class="text" data-reveal="left">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Id laborum iste doloremque ab facere unde alias sit commodi accusamus? Eius ut molestiae nemo perspiciatis, pariatur numquam accusamus voluptatem libero sint.
    </p>
  </div>
  <div class="image-box" data-reveal="left">
    <img src="https://wallpapercave.com/wp/wp4318209.jpg" alt="" class="img">
  </div>
  <div class="image-box" data-reveal="left">
    <img src="https://i5.walmartimages.com/asr/521f0e9a-eca8-4c26-8913-f992628465d3.aeb4f3035a5ffa976394f0bb9f6afefa.jpeg" alt="" class="img">
  </div>
  <div class="content-box">
    <h2 class="title" data-reveal="left">
      Tea
    </h2>
    <p class="text" data-reveal="left">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Id laborum iste doloremque ab facere unde alias sit commodi accusamus? Eius ut molestiae nemo perspiciatis, pariatur numquam accusamus voluptatem libero sint.
    </p>
  </div>
  <div class="content-box">
    <h2 class="title" data-reveal="right">
      Lokum
    </h2>
    <p class="text" data-reveal="right">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Id laborum iste doloremque ab facere unde alias sit commodi accusamus? Eius ut molestiae nemo perspiciatis, pariatur numquam accusamus voluptatem libero sint.
    </p>
  </div>
  <div class="image-box" data-reveal="right">
    <img src="https://i.pinimg.com/originals/7a/62/1f/7a621fabe6f0b95a4aedea6fb7347888.jpg" alt="" class="img">
  </div>
</section>

onscroll.js

function scrollReveal() {
  const revealElements = document.querySelectorAll("[data-reveal]");

  for(let i = 0; i < revealElements.length; i++){
    const isElementsOnScreen = revealElements[i].getBoundingClientRect().top < window.innerHeight;
    if (isElementsOnScreen) {
      revealElements[i].classList.add("revealed")
    } else {
      revealElements[i].classList.remove("revealed")
    }
  }
}

window.addEventListener("scroll", scrollReveal);
window.addEventListener("load", scrollReveal);

reveal.css

[data-reveal="left"] {
  clip-path: inset(0 100% 0 0);
}
[data-reveal="left"].revealed {
  animation: reveal-left 1s cubic-bezier(0.17, 0.97, 0.38, 1) forwards 300ms;
}
@keyframes reveal-left {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}

[data-reveal="right"] {
  clip-path: inset(0 0 0 100%);
}
[data-reveal="right"].revealed {
  animation: reveal-right 1s cubic-bezier(0.17, 0.97, 0.38, 1) forwards 300ms;
}
@keyframes reveal-right {
  0% {
    clip-path: inset(0 0 0 100%);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}

credit: https://codepen.io/HighFlyer/pen/qByPyqr