要素が画面に入ったときに幕が上に上がるアニメーション

<div class="cCurtainRising jsCurtainRising">
  <div class="cCurtainRising__image jsImagesLoaded">
    <img src="https://picsum.photos/id/158/400/300" />
  </div>
  <div class="cCurtainRising__curtain"></div>
</div>

.cCurtainRising {
  position: relative;
  overflow: hidden;
}

.cCurtainRising__curtain {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #efefef;

  transition: transform 0.7s;
}
.cCurtainRising.visible .cCurtainRising__curtain {
  transform: translateY(-100%);
}

.cCurtainRising {
  max-width: 95vw;
  max-height: 95vh;
}

<script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js"></script>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    imagesLoaded(".jsImagesLoaded img", () => {
      gsap.utils.toArray(".jsCurtainRising").forEach((ele) => {
        ScrollTrigger.create({
          trigger: ele,
          start: "top 100%",
          toggleClass: {
            targets: ele,
            className: "visible",
          },
          once: true, // 一度クラスを付与したらトリガーを再度作動させない
        });
      });
    });
  });
</script>