html

<div class="clip-wrap">
  <div class="clip-top"></div>
  <div class="clip-bottom"></div>
</div>

JavaScript

const clipWrap = document.querySelector(".clip-wrap");
clipWrap.classList.add("is-active");

jquery

$(".clip-wrap").addClass("is-active"); //デバッグ用

scss

.clip-wrap {
  position: relative;
  width: 500px; //希望のコンテンツ横幅
  .clip-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: red; //デバッグ用カラー
    transition: 0.6s;
    clip-path: polygon(0 0, 0 0, 0 0);
  }
  .clip-bottom {
    position: relative;
    top: 0;
    left: 0;
    height: 300px; //デバッグ用高さ設定
    z-index: 1;
    background: blue; //デバッグ用カラー
  }
  &.is-active {
    .clip-top {
      transition: 0.6s;
      clip-path: polygon(0 0, 100% 100%, 100% 0);
    }
  }
}