Gsapでローディングアニメーションを実装 #1/2

2023.07.13 ローディングアニメーションの実装について

はじめに

概要

今回は、当サイトで実装している軽微なローディングアニメーションをGsapを使って実装する方法についてご紹介します。ローディングアニメーションは、サイトに初めて訪れる人に強い印象を与えることができます。ぜひ、この技術をマスターしましょう。なお、Gsapの使い方についてはこちらを参照してください。

目的

アニメーションの流れ
ローディングアニメーションの実装
まとめ

※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。

アニメーションの流れ

bodyタグの中には、以下のようにもう一つの親コンテンツ（ここではid=global-containerとしています）を作成します。loadingアニメーションが終了するまでは、このコンテンツをdisplay:noneで非表示にしておきます。そして、loadingアニメーションが終了した後に、display:blockを使って要素を表示させる流れになります。サンプルコードはこちらです。

ローディングアニメーションの実装

HTMLコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/gsap.min.js"></script>
  </head>
  <body>
    <div class="loading js_2">
      <div class="loading__inner">
        <h1 class="js_1">ローディング<br />アニメーション</h1>
      </div>
      <!-- /.loading__inner -->
    </div>
    <!-- /.loading -->

    <div id="global-container" class="js_3">
      <div id="container">
        <header>ヘッダー</header>
        <main>
          <div id="main-container">メインコンテンス</div>
          <!-- /#main-container -->
        </main>
        <footer>フッター</footer>
      </div>
      <!-- /#container -->
    </div>
    <!-- /#global-container -->
    
  </body>
</html>

bodyタグの直下にloadingアニメーションをセットします。アニメーション専用のクラス(js_1,js_2名前は何でもよい)をつけておきます。

CSSコード

body {
      color: #ffffff;
      font-size: 3rem;
      letter-spacing: 0.02em;
    }

    .loading h1 {
      color: Black;
    }
    .loading__inner {
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    #global-container {
      display: none;
      opacity: 0;
      visibility: hidden;
    }

    header {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 150px;
      background-color: Blue;
    }

    main {
      height: 500px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: Gray;
    }

    footer {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 150px;
      background-color: Black;
    }

loadingアニメーションが終了するまで、#global-containerは非表示にしておきます。

Gsapコード

<script>
      const loading = gsap.timeline();
      loading
        .from(
          ".js_1",
          1,
          {
            opacity: 0,
            y: 50,
          },
          2
        )
        .to(".js_1", 1, {
          delay: 0.5,
          opacity: 0,
          y: 50,
        })
        .to(".js_2", 1, {
          display: "none",
        })
        .to(".js_3", 1, {
          display: "block",
          opacity: 1,
          visibility: "visible",
          y: -10,
          delay: 1,
        });
    </script>

gsapのtimelineを使用します。こちらを使用することで、アニメーションを順番に表示することができ、コントロールすることができます。timelineについてはこちらを参照ください。

実装動画