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

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

公開日
2022.09.17
更新日
2022.12.18
gsapのstaggerで順番にアニメーションさせる方法

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

要素を順番にアニメーションさせる。
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 } })

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

jQueryでURLやパラメータを取得する方法【location】

jQueryでURLやパラメータを取得する方法【location】

【Adminer】Local by Flywheelでデータベースを操作しよう

【Adminer】Local by Flywheelでデータベースを操作しよう

【手動】Local by Flywheelで本番環境のWordPressをローカルに複製する

【手動】Local by Flywheelで本番環境のWordPressをローカルに複製する

jQueryでheaderとfooterを共通化する【load()メソッド】

jQueryでheaderとfooterを共通化する【load()メソッド】

Amazonみたいな商品の拡大プレビュー機能を実装

Amazonみたいな商品の拡大プレビュー機能を実装

フォントサイズを可変にする方法【CSSのclamp関数で実現】

フォントサイズを可変にする方法【CSSのclamp関数で実現】