gsapのstaggerの使い方

2021年8月16日gsap

gsapのstaggerの使い方を紹介します。

デモ

See the Pen
gsap stagger by Sosak (@Sosak2021)
on CodePen.

gsapのstaggerの使い方

基本的な使い方

gsap.from('img', {
  autoAlpha: 0,
  y: -100,
  ease: "power3",
  duration: 1,
  stagger: 0.2
})

gsap.from('img', {
  autoAlpha: 0,
  y: -100,
  ease: "power3",
  duration: 1,
  stagger: {
    each: 0.2
  }
})

上のようにして、staggerを使用します。
2つとも同じことを意味しています。
通常は上の書き方をしますが、いろいろなアニメーションをさらに加えたいときに、下の書き方を使います。
例えば、下のような例です。

総時間数を指定する

gsap.from('img', {
  autoAlpha: 0,
  y: -100,
  ease: "power3",
  duration: 1,
  stagger: {
    amount: 0.5
    // each: 0.5
  }
})

eachでは、それぞれの要素に対して、0.5s経過したらアニメーションを開始していましたが、amountを選択すると、総時間数で0.5sとすることができます。

開始位置を指定する

gsap.from('img', {
  autoAlpha: 0,
  y: -100,
  ease: "power3",
  duration: 1,
  stagger: {
    each: 0.5,
    from: "end"
  }
})

fromをつけることで、開始位置を変更することができます。
上の場合、最後からスタートします。

gsap.from('img', {
  autoAlpha: 0,
  y: -100,
  ease: "power3",
  duration: 1,
  stagger: {
    each: 0.5,
    from: "center"
  }
})

こちらの場合は、真ん中からスタートします。

JavaScriptでダイナミックにアニメーションさせたいとき

gsap.from('img', {
  autoAlpha: 0,
  y: -100,
  ease: "power3",
  duration: 1,
  stagger: (index) => {
    console.log(index);
  }
})

最後に、JavaScriptでダイナミックにアニメーションさせたいときも、上のようにコールバック関数を作成することができます。