gsapのstaggerで順番にアニメーションさせる方法

2022.09.17

2022.12.18

GitHub

どうも！かけちまるです！

要素を順番にアニメーションさせる。
jQueryだと少し面倒くさいのです。

GSAPを使えば少ない記述で簡単にできてしまいます。
ちなみにstagger（スタッガー）はプロパティです。

この記事では、

・staggerを使った記述方法
・staggerのオプションについて

がわかります。

staggerを使った基本的な記述

実装サンプル

JavaScript
gsap.fromTo('.box', .5, {
   y: 30,
   autoAlpha: 0
},
{
   y: 0,
   autoAlpha: 1,
   repeat: -1,
   stagger: {
       each: .5,
   }
})

GSAPトゥイーンの中にstaggerプロパティを書き、その中にオプションを書いていく感じです。

staggerのオプション

オプション	設定値	説明
amount	0.1 [秒数]	アニメーション間隔の合計時間を指定する。例.) `amount`が1でアニメーション要素が10個の場合、間隔は0.1です。
each	0.1 [秒数]	間隔の時間を指定する。
from	‘start’,’center’,’end’,’edges’,’random’,または数値	アニメーションをどこから開始するか指定
grid	[0,10] または ‘auto’ [Array \| ‘auto’]	要素がグリッドに視覚的に表示されている場合に使用できます。
axis	‘x’,’y’	gridを使用しているときに使用可能。アニメーション方向の軸を指定できる。
ease	公式サイト参照	イージングを指定する。

オプションについてもう少し詳しく解説します。

amount

アニメーション間隔の合計時間を指定する。
例.) amountが1でアニメーション要素が10個の場合、間隔は0.1です。

固定の時間を指定したい場合は代わりにeachを指定します。

実装サンプル

JavaScript
gsap.fromTo('.box', .5, {
   y: 30,
   autoAlpha: 0
},
{
   y: 0,
   autoAlpha: 1,
   repeat: -1,
   stagger: {
       amount: 1
   }
})

each

アニメーション間隔の時間を決めることができます。

合計時間を指定したい場合は代わりにamountを指定します。

実装サンプル

JavaScript
gsap.fromTo('.box', .5, {
   y: 30,
   autoAlpha: 0
},
{
   y: 0,
   autoAlpha: 1,
   repeat: -1,
   stagger: {
       each: .5
   }
})

from

アニメーションをどこから開始するか指定

設定値	説明
‘start’	最初の要素から再生
‘center’	真ん中の要素から再生
‘edges’	端の要素から再生(両端から中央に向かって)
‘end’	最後の要素から再生
‘random’	ランダムな順番で再生

gridを使う場合は配列で指定します。
例えば、中央であれば[0.5,0.5]、右上隅であれば[1,0]という感じに指定できます。

実装サンプル

JavaScript
gsap.fromTo('.box', .5, {
   y: 30,
   autoAlpha: 0,
},
{
   y: 0,
   autoAlpha: 1,
   repeat: -1,
   stagger: {
       from: 'start',
       each: .5
   }
});

grid

要素がgrid状に配置されている時に中央から広がるようにアニメーションさせたいときに使えます。
'auto'に設定するとfromで指定した位置から広がるようにアニメーションできます。

[0,10]のように配列で指定すると0〜10個目ずつを1セットでアニメーションさせていくイメージでしょうか。
※あまり自信がないので間違っていたらお問い合わせかTwitterのDMで教えてください🙇‍♂️

実装サンプル

JavaScript
gsap.fromTo('.box', .5, {
   autoAlpha: .5
},
{
   autoAlpha: 1,
   repeat: -1,
   stagger: {
       each: .5,
       grid: 'auto',
       from: 'center'
   }
})
 
gsap.fromTo('.box', .5, {
   autoAlpha: .5
},
{
   autoAlpha: 1,
   repeat: -1,
   stagger: {
       each: .5,
       grid: [0, 10],
       from: 'start'
   }
})

axis

gridを指定しているときに使用できるオプションです。

gridを指定するとx軸とy軸方向に広がるようにアニメーションしますが、axisを指定するとx軸かy軸のどちらかに方向を絞ることができます。

実装サンプル

JavaScript
gsap.fromTo('.box', .5, {
   autoAlpha: .5
},
{
   autoAlpha: 1,
   repeat: -1,
   stagger: {
       each: .5,
       grid: 'auto',
       from: 'center',
       axis: 'y'
   }
})

ease

イージングを指定できます。
デフォルト値は'none'です。

注意

・ここでのeaseは、staggerのイージングなので、eachの秒数が分散するイメージです。
要素自体にイージングをかけたい場合は、staggerの外でeaseを指定しましょう。

指定できる値は、

power1
power2
power3
power4
back
elastic
bounce
rough
slow
steps
circ
expo
sine

があります。

それぞれに特徴があります。
さらに、power04.outのようにin,inOut,outをつけたり、back.out(1.7)のように数値を設定できるものもあります。

各イージングの特徴は、公式サイトが直感的でわかりやすいのでオススメです。

実装サンプル

JavaScript
gsap.fromTo('.box', .5, {
   y: 30,
   autoAlpha: 0
},
{
   y: 0,
   autoAlpha: 1,
   repeat: -1,
   stagger: {
       each: .5,
       ease: 'power4.out'
   }
})
 
gsap.fromTo('.box', .5, {
   y: 30,
   autoAlpha: 0
},
{
   y: 0,
   autoAlpha: 1,
   repeat: -1,
   ease: 'power4.out',
   stagger: {
       each: .5
   }
})

おわり

フィードバックを送信

記事についてのフィードバックはTwitterかお問い合わせフォームから受け付けております。