GsapのStaggerについて解説します。
GsapのStaggerは、要素のアニメーションを順番に遅らせて実行するためのメソッドです。Staggerには便利なオプションも存在し、テキストや画像のアニメーションの幅を広げてくれます。ぜひともマスターしていきましょう。Gsapの使い方についてはこちらを参照ください。
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: アニメーションをランダムに表示させます。
- Staggerを活用すれば、複雑なアニメーションも容易に実装できる
- 指定する要素が重要である
- 順番にアニメーションさせるメソッドである
- 便利なオプションが用意されている
