<div class="container">
  <button class="btn btn--up">Start</button>
  <svg class="overlay" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
    <path class="overlay__path" vector-effect="non-scaling-stroke" d="M 0 100 V 100 Q 50 100 100 100 V 100 z" />
  </svg>
</div>
<div class="data"></div>
.container {
  display: grid;
  place-items: center;
  position: relative;
  height: 100vh;
  background: rgb(238, 174, 202);
  background: linear-gradient(
    90deg,
    rgba(238, 174, 202, 1) 0%,
    rgba(148, 187, 233, 1) 100%
  );
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.btn {
  font-size: 5vw;
  padding: 0.5em;
  cursor: pointer;
}

.data {
  position: fixed;
  z-index: 200;
  top: 0;
  left: 0;
  font-size: 5vw;
  background-color: #fff;
  width: 100%;
  text-align: left;
}
View Compiled
const overlayPath = document.querySelector(".overlay__path");
const btnUp = document.querySelector(".btn--up");
const pathDataText = document.querySelector(".data");

const upwardsAnime = () => {
  const tl = gsap
    .timeline({
      onUpdate: function () {
        let pathData = overlayPath.getAttribute("d");
        pathDataText.innerHTML = pathData;
      }
    })
    .set(overlayPath, {
      // 初めにアニメーションするパス
      // 透明パス
      attr: { d: "M 0 100 V 100 Q 50 100 100 100 V 100 z" }
    })
    // 扇型を黒く塗りつぶしたパス
    .to(overlayPath, {
      duration: 5,
      ease: "power4.in",
      attr: { d: "M 0 100 V 50 Q 50 0 100 50 V 100 z" }
    })
    // 黒パス
    .to(overlayPath, {
      duration: 5,
      ease: "power2",
      attr: { d: "M 0 100 V 0 Q 50 0 100 0 V 100 z" }
    })
    // 後からアニメーションするパス
    // 黒パス
    .set(overlayPath, {
      attr: { d: "M 0 0 V 100 Q 50 100 100 100 V 0 z" }
    })
    // 扇型の余白部分を黒く塗りつぶしたパス
    .to(overlayPath, {
      duration: 5,
      ease: "power2.in",
      attr: { d: "M 0 0 V 50 Q 50 0 100 50 V 0 z" }
    })
    // 透明パス
    .to(overlayPath, {
      duration: 5,
      ease: "power4",
      attr: { d: "M 0 0 V 0 Q 50 0 100 0 V 0 z" }
    });
};

btnUp.addEventListener("click", upwardsAnime);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.co/gsap@3/dist/gsap.min.js