JavaScript

GSAPのStaggerで時間差アニメーション実装解説

2023年9月26日

※ 当サイトではアフィリエイト広告を利用しています

GSAPのStaggerで時間差アニメーション実装解説

この記事では「GSAPのStaggerで時間差アニメーションの実装」について解説します。

GSAPのStaggerを使えば、アニメーションに時間差を設定することができます。

この記事を読むと...
  • GSAPのstaggerプロパティの使い方がわかる

なお、GSAPの導入方法や基本的な使い方については、以下の記事をご覧ください。

あわせて読みたい

GSAPのStaggerとは

GSAPのStaggerとは、同じ要素を連続で時間差でアニメーションを設定することができます。

staggerプロパティは、以下のようにGSAPに1行追記するだけで使うことができます。

See the Pen テキストアニメーション2 by 山中滉大 (@tips-web) on CodePen.

<div class="container">
  <div class="box">要素1</div>
  <div class="box">要素2</div>
  <div class="box">要素3</div>
</div>
.container {
  padding-top: 400px;
  padding-bottom: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background-color: skyblue;
  margin-right: 20px;

}
gsap.fromTo('.box', {
  autoAlpha: 0,
  y: 20
}, {
  autoAlpha: 1,
  y: 0,
  stagger: 0.5, // 0.5秒時間差で発火
})

初期状態はy軸方向に20pxずらし、autoAlphaが0で透明にしています。

アニメーションが発火すると、autoAlphaが1で不透明、y軸0の位置に移動しながら、0.5秒の時間差で要素が表示されます。

以下のようなイメージをするといいでしょう。

GSAPのstagger

Staggerで使えるプロパティは以下になります。

プロパティ意味単位
eachアニメーション開始時間の間隔
amountアニメーション開始時間の間隔の合計時間
fromアニメーション開始位置を指定"start" , "end", "center"

"edges" ,"random", 数値

gridfromで指定した位置から広がるように

アニメーション

"auto"

または[数値, 数値]

axisgrid有効時に使用可能で、

アニメーションの方向軸を指定

"x" "y"

Staggerプロパティ

Staggerプロパティは1行で記述できますが、以下のようにも記述できます。

gsap.fromTo('.box', {
  autoAlpha: 0,
  y: 20

}, {
  autoAlpha: 1,
  y: 0,
  stagger: {

  // ここにstaggerで使えるプロパティを書く。

  }

})

例えば、Staggerに以下のような記述でさまざまなプロパティを指定できます。

See the Pen stagger2 by 山中滉大 (@tips-web) on CodePen.

<div class="container grid">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
.container {
  padding-top: 200px;
  padding-bottom: 400px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;

}

.grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;

}

.box {
  display: inline-block;
  width: 80px;
  height: 80px;
  background-color: skyblue;

}
gsap.fromTo('.box', {
  autoAlpha: 0,
  y: 20

}, {
  autoAlpha: 1,
  y: 0,
  stagger: {
    each: .5, // 0.5秒時間差で発火
    amount: 2, // アニメーション間隔の時間
    from: 'center',// アニメーション開始位置の指定

  }

})

アニメーション開始位置を中央の要素に指定し、それぞれの要素を0.5秒おきに発火、アニメーション間隔は2秒で指定しています。

また、Staggerにgridプロパティやaxisプロパティを適用すると以下のようになります。

See the Pen stagger2 by 山中滉大 (@tips-web) on CodePen.

gsap.fromTo('.box', {
  autoAlpha: 0,
  y: 20

}, {
  autoAlpha: 1,
  y: 0,
  stagger: {
    each: .5,
    amount: 2,
    from: 'center',
    grid: "auto", // アニメーション開始位置から広がるようにアニメーション
    axis:'x' // grid有効時に使用可能。アニメーションの方向軸

  }

})

中央の要素からx軸方向に広がるようにアニメーションします。

ScrollTriggerとの組み合わせ

ScrollTriggerと組み合わせる場合は、以下のようにScrollTriggerの記述を追記します。

その際、ScrollTriggerのCDNを読み込む必要があります。

ScrollTriggerの導入方法や使い方については、以下の記事をご覧ください。

あわせて読みたい

See the Pen stagger4 by 山中滉大 (@tips-web) on CodePen.

<div class="container grid">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
.container {
  padding-top: 1000px;
  padding-bottom: 400px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;

}

.grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;

}

.box {
  display: inline-block;
  width: 80px;
  height: 80px;
  background-color: skyblue;

}
gsap.fromTo('.box', {
  autoAlpha: 0,
  y: 20

}, {
  autoAlpha: 1,
  y: 0,

  stagger: {
    each: .5,
    amount: 2,
    from: 'start',
    grid: "auto",
    axis:'x'

  },

  // スクロールトリガー
  scrollTrigger: {
    trigger: '.box', // トリガー要素
    start: 'top center', // トリガー発火位置
    markers: true,

  }
})

画面下にスクロールしてトリガー発火位置に要素が来ると、アニメーションが発火します。

このように簡単にアニメーションを設定できます。

まとめ

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

Staggerは記述がシンプルなので非常に使いやすく便利な機能です。

時間差でさまざまな調整ができるので、実際にいろいろいじってみましょう。

GSAPで本格的な学習をするためには10日間で学べるこちらの講座がおすすめです!

【たった"10日間"でWEBアニメーション実装スキル習得】GSAPマスター講座

今すぐ学習をはじめる>>

  • この記事を書いた人
アバター画像

こうだい

兼業でWeb制作事業|31歳|本業畑違いで知識0から学習開始→1年目で初案件獲得→2年で月の兼業受注金額70万円達成|4年目で100万円達成|兼業でも稼げることを確信|Web制作メンター|制作費無料のホームページ制作事業運営|コーディング・ホームページ制作についてお気軽にお問い合わせください

-JavaScript
-