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>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css" />
  <link rel="stylesheet" href="/src/scss/style.scss">
  <script type="module" src="/src/js/gsap.js"></script>
</head>

<body>
  <div id="global-container">
    <div class="loading js-loading-2">
      <h1 class="js-loading-1">ローディング<br />アニメーション</h1>
    </div>
    <!-- /.loading -->
    <div id="container" class="js-loading-3">
      <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: #fff;
  font-size: 3rem;
  letter-spacing: 0.02em;
}

.loading {
  width: 100%;
  color: Black;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  opacity: 0;
}

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コード

import gsap from "gsap";

export class GsapAnimation {
  constructor() {
    this.initLoading();
  }
  initLoading() {
    gsap.set(".js-loading-2", {
      opacity: 1,
    });
    const loading = gsap.timeline();
    loading
      .from(".js-loading-1", {
        opacity: 0,
        delay: 2,
        y: 10,
      })
      .to(".js-loading-1", {
        opacity: 0,
        y: 10,
        delay: 1,
      })
      .to(".js-loading-2", {
        display: "none",
      })
      .from(".js-loading-3", {
        opacity: 0,
      });
  }
}
new GsapAnimation();

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

応用編
ブラウザのキャッシュを活用し、ローディングアニメーションを１回のみ表示させることも可能です。こちらについては別の記事で説明しておりますので参照ください。

まとめ