GSAPのStaggerについて解説します。

はじめに

概要

GsapのStaggerは、要素のアニメーションを順番に遅らせて実行するためのメソッドです。Staggerには便利なオプションも存在し、テキストや画像のアニメーションの幅を広げてくれます。ぜひともマスターしていきましょう。Gsapの使い方についてはこちらを参照ください。

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

読者

GsapのStaggerについて解説します。は、最初にどこを理解するとよいですか？

木村

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

読者

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

木村

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

Staggerでできること

Staggerでできることでは、GsapのStaggerについて解説します。を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

Staggerを使用すれば以下のようなことが可能です。

Staggerでできることで押さえたいポイント

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

Staggerでできることの確認方法

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

サンプルコード

サンプルコードでは、GsapのStaggerについて解説します。を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

上記のサンプルコードを配布いたします。コードを見ながら一緒に理解を深めていきましょう。

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Stagger</title>
    <!-- リセットCSS -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/destyle.css@3.0.2/destyle.min.css"
    />
    <!-- 独自のCSS -->
    <link rel="stylesheet" href="dist/css/stagger.min.css" />
  </head>
  <body>
    <div id="global-container">
      <div id="container">
        <header class="header">
          <div class="header__inner wrap flex-row">
            <h1 class="flex-column">
              <span>Staggerの使い方</span>
              <span>(様々なテキストアニメーション)</span>
            </h1>
          </div>
        </header>

        <main>
          <div id="main-container" class="wrap">
            <div class="stagger">
              <h2>左から右へフェードインさせてください</h2>
              <div class="stagger__box flex-row js_1_img">
                <img src="https://picsum.photos/200/300?random=1" alt="" />
                <img src="https://picsum.photos/200/300?random=2" alt="" />
                <img src="https://picsum.photos/200/300?random=3" alt="" />
                <img src="https://picsum.photos/200/300?random=4" alt="" />
              </div>
            </div>

            <div class="stagger">
              <h2>右からへフェードインさせてください</h2>
              <div class="stagger__box flex-row js_1-2_img">
                <img src="https://picsum.photos/200/300?random=5" alt="" />
                <img src="https://picsum.photos/200/300?random=6" alt="" />
                <img src="https://picsum.photos/200/300?random=7" alt="" />
                <img src="https://picsum.photos/200/300?random=8" alt="" />
              </div>
            </div>
          </div>
          <!-- /#main-container -->
        </main>
      </div>
      <!-- /#container -->
    </div>
    <!-- /#global-container -->

    <!-- Gsap　CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
    <script>
      gsap.from(".js_1_img img", 2, {
        delay: 2,
        opacity: 0,
        y: 10,
        stagger: {
          amount: 0.5,
        },
        ease: "power2.out",
      });

      gsap.from(".js_1-2_img img", 2, {
        delay: 2.5,
        y: 10,
        opacity: 0,
        ease: "power2.out",
        stagger: {
          amount: 0.5,
          from: "end",
        },
      });
    </script>
  </body>
</html>

Gsap専用のクラス(.js_1_img・.js_1_2_img※名前はなんでも良い)を記述しています。こちらのクラスを起点にGsapのコードを記述します。

Gsap

<!-- Gsap　CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
  gsap.from(".js_1_img img", 2, {
    delay: 2,
    opacity: 0,
    y: 10,
    stagger: {
      amount: 0.5,
    },
    ease: "power2.out",
  });

  gsap.from(".js_1-2_img img", 2, {
    delay: 2.5,
    y: 10,
    opacity: 0,
    ease: "power2.out",
    stagger: {
      amount: 0.5,
      from: "end",
    },
  });
</script>

コードはシンプルで、上記のように記述します。

コードの解説

コードの解説では、GsapのStaggerについて解説します。を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

ポイントは以下の2点です。・gsap.fromメソッドの理解・staggerの理解

GSAPのtoとfromメソッド

toメソッドは指定した要素やオブジェクトのプロパティを、アニメーションの目標値に向かって変化させるために使用されます。例えば、要素の位置を移動したり、サイズを変更したり、透明度を調整したりすることができます。 fromメソッドは指定した要素やオブジェクトのプロパティを、アニメーションの初期値から目標値に向かって変化させるために使用されます。つまり、アニメーションが開始する前の状態を指定します。 toだと、初期値の値をCSSで設定しておく必要があるため、軽微なアニメーションはfromが便利です。 opacityを0に設定すれば、初期値0から1に向かってアニメーションすることになります。

amount

amountオプションは、アニメーションの進行状況を0から1までの範囲で指定します。たとえば、amount: 0.5とすると、アニメーションは進行の50%の位置で停止します。また、amount: 1とすると、アニメーションは完全に終了します。本のアニメーションでは、.js_1_img imgという要素を対象にしています。その中の4つのimg要素を少しずつずらしながら表示させるように設定しています。

staggerのオプションfrom

アニメーションを開始位置を設定・end（デフォルト）: アニメーションは最後の要素から順番に開始します。・start: アニメーションは最初の要素から順番に開始します。・center: アニメーションは中央から外側に向かって順番に開始します。・edges: アニメーションは最初の要素と最後の要素から同時に開始し、中央に向かって順番に進行します。・random: アニメーションをランダムに表示させます。

まとめ

Staggerを活用すれば、複雑なアニメーションも容易に実装できる
指定する要素が重要である
順番にアニメーションさせるメソッドである
便利なオプションが用意されている

GsapのStaggerについて解説します。

目次