WebCanta

初心者のための徹底ガイド-Web制作

会員ログイン
GSAP

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

ローディングアニメーションの実装について
はじめに
概要
今回は、当サイトで実装している軽微なローディングアニメーションをGsapを使って実装する方法についてご紹介します。ローディングアニメーションは、サイトに初めて訪れる人に強い印象を与えることができます。ぜひ、この技術をマスターしましょう。なお、Gsapの使い方についてはこちらを参照してください。
※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。
疑問を持つ読者のイラスト読者

Gsapでローディングアニメーションを実装は、最初にどこを理解するとよいですか？

著者・木村のプロフィール写真木村

対象要素を取得する処理、動作を始める条件、見た目を変える処理の三つに分けると、コードの流れを追いやすくなります。

話を聞く読者のイラスト読者

実際に試すときは、手順だけでなく確認方法も知っておいた方がよいでしょうか？

著者・木村のプロフィール写真木村

はい。この記事では、作業の目的から実装後の確認までを順番に整理します。自分の環境と照らし合わせながら読み進めてください。

 

アニメーションの流れ

アニメーションの流れでは、Gsapでローディングアニメーションを実装 #1/2を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

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

アニメーションの流れで押さえたいポイント

アニメーションの流れは、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。

アニメーションの流れの確認方法

ブラウザーのコンソールにエラーがないかを確認し、クリックやスクロールを繰り返してもイベントが重複しないかを試します。スマートフォン幅とキーボード操作も確認してください。

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

ローディングアニメーションの実装では、Gsapでローディングアニメーションを実装 #1/2を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

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

実装前に確認しておきたいこと

ここでは、Gsapでローディングアニメーションを実装を実際の制作へ取り入れる前に、準備しておきたい内容を整理します。先に作業範囲と確認方法を決めておくと、既存ページへの影響を抑えながら進められます。

作業の目的と変更範囲を決める

対象要素を取得する処理、動作を始める条件、見た目を変える処理の三つに分けると、コードの流れを追いやすくなります。 サンプルをそのまま貼り付ける前に、どのページ、どの要素、どの利用者へ影響するのかを書き出してください。目的が明確であれば、必要以上にコードや設定を増やさずに済みます。

元の状態へ戻せるようにする

テーマや設定を変更するときは、対象ファイルや設定値のコピーを残します。複数の変更を一度に行わず、一つ反映するたびに表示と動作を確認すると、問題が起きても原因を切り分けやすくなります。

よくあるつまずきと確認方法

Gsapでローディングアニメーションを実装が期待どおりに動かない場合は、コードを追加し続ける前に、読み込み順、対象要素、設定値、キャッシュの順で確認します。小さな入力ミスや確認条件の違いが原因になることも少なくありません。

変更が反映されない場合

保存したファイルと表示中のページが対応しているかを確認し、キャッシュを消して再読み込みします。ブラウザーの開発者ツールやWordPressのエラーログを確認すると、読み込み失敗や記述ミスを見つけやすくなります。

公開前の最終確認

ブラウザーのコンソールにエラーがないかを確認し、クリックやスクロールを繰り返してもイベントが重複しないかを試します。スマートフォン幅とキーボード操作も確認してください。

まとめ

  • Gsapを使用することにより、ローディングアニメーションも簡単に実装ができる
  • Gsapのtimelineを活用する
  • アニメーションの流れを理解する
  • ブラウザのキャッシュを活用し、アニメーションを1回のみ表示することも可能である

関連する記事

GSAP

【Gsap】SVGテキストアニメーション

このコードは、GSAPのScrollTriggerを使用して、スクロールイベントに基づいてSVGテキストの色を動的に変更するアニメーションを設定しています。ユーザーがページをスクロールすると、SVGテキストと黄色のボックスの位置とサイズを取得し、SVGテキストの下端が黄色のボックスの上端に重なるかどうかを確認します。テキストがボックスに重なる場合にはテキストの色を黒に、重ならない場合には白に変更することで、背景に対してテキストが読みやすい色で表示されるようにしています。この動的な色の変更により、スクロールに応じた視覚効果を提供し、ユーザー体験を向上させています。

GSAP

【Gsap】でSVGをアニメーション

Gsapを使って、SVG画像をアニメーションする方法について、このサイトで詳しく説明しています。実装例や具体的なコードを参考にして、Gsapを活用して魅力的なウェブサイトを作成しましょう。Gsapはサイト制作において非常に便利なツールです。

GSAP

【Gsap】スクロールアニメーション

この一連のコードは、ウェブページの構造、スタイル、および動的なインタラクションを定義するために使用されます。HTMLでページの基本的な骨格を作成し、CSS（Sassを含む）で視覚的スタイルを適用し、GSAPとScrollTriggerを使用してスクロールに基づいたアニメーションを実装しています。

MEMBER COMMENTS

コメント（0件）

会員ログイン後にコメントできます

記事への質問や感想をコメントで共有できます。無料会員登録後もこの記事へ戻れます。

会員ログイン 無料会員登録