<div class="loading" data-opening-animation>
  <div class="loading__inner">
    <p class="loading__text" data-opening-animation="text">
      自然の中でリラックスしながら<br />仕事ができる森のシェアオフィス
    </p>
    <figure class="loading__logo" data-opening-animation="logo">
      <img src="https://masatonishi.github.io/codepen_imgs/text-moving-up-loading-animation/logo.svg" alt="ロゴ" width="200" height="105" />
    </figure>
  </div>
</div>
<div class="contents">コンテンツ</div>

.loading {
  position: fixed;
  inset: 0;
  z-index: 10;
  height: 100svh;
  background-color: #333;
}

.loading__inner {
  width: 100%;
  height: inherit;
  display: grid;
  place-content: center;
  row-gap: 10px;
}

.loading__text {
  font-size: max(12px, 1rem);
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 2;
  text-align: center;
  color: #fff;
}

.loading__logo {
  margin: 0 auto;
  width: min(200px, 100%);
}

.contents {
  height: 100svh;
  display: grid;
  place-items: center;
  font-size: max(22px, 3vw);
}

// オープニングアニメーション用の要素を取得
const loading = document.querySelector("[data-opening-animation]");
const text = document.querySelector('[data-opening-animation="text"]');
const logo = document.querySelector('[data-opening-animation="logo"]');

// 初期状態の設定
gsap.set(text, { autoAlpha: 0, y: 60 }); // テキストを非表示に/下に配置
gsap.set(logo, { autoAlpha: 0 }); // ロゴを非表示に

// ページ読み込み完了時にアニメーションを開始
window.addEventListener("load", () => {
  // GSAPタイムラインを作成
  const tl = gsap.timeline();

  tl.to(
    text, // textのアニメーションを指定
    {
      autoAlpha: 1, // autoAlphaを1に
      duration: 1.33, // 1.33秒かけて
      ease: "power2.inOut", // イージングを指定
    }
  )
    .to(
      text, // textのアニメーションを指定
      {
        y: -10, // テキストを少し上に移動
        duration: 1.33, // 1.33秒かけて
        ease: "power2.inOut", // イージングを指定
      },
      "+=0.66" // 前のアニメーションから0.66秒後に開始
    )
    .to(
      logo, // logoのアニメーションを指定
      {
        autoAlpha: 1, // autoAlphaを1に
        duration: 1.33, // 1.33秒かけて
        ease: "power2.inOut", // イージングを指定
      },
      "-=1.33" // 前のアニメーションが終了する1.33秒後に（＝テキスト移動と同時に開始）
    )
    .to(
      loading, // loadingのアニメーションを指定
      {
        clipPath: "inset(0 0 0 100%)", // clip-pathをinset(0 0 0 100%)に
        duration: 1, // 1秒かけて
        ease: "power2.inOut", // イージングを指定
      },
      "+=0.33" // 前のアニメーションから0.33秒後に開始
    );
});