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

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

はじめに

概要

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

目的

Staggerでできること
サンプルコード配布
コードの解説
まとめ

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

Staggerでできること

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>

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

コードの解説

ポイントは以下の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: アニメーションをランダムに表示させます。

まとめ