テキストが上に移動しロゴが表示されるオープニングアニメーション

<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>

// オープニングアニメーション用の要素を取得
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秒後に開始
    );
});