GSAPでは、アニメーションを制御するときに「stagger」というプロパティを使用することができます。このプロパティでは、トゥイーンに複数のターゲットがある時に、各アニメーションの開始間に遅延を追加することができます。
staggerにもいくつかのプロパティを設定することができるので、いろいろなアニメーションを作成することができます。しかもとっても簡単なので、ぜひ使ってみてください！
staggerの使い方
単純に各アニメーションの開始間に遅延を追加するだけであれば、アニメーションを設定する際にstaggerを設定するだけでOKです。
See the Pen stagger-01 by Michi (@Michi_) on CodePen.
gsap.from(".box",{
rotate: 360,
stagger: 0.1,
opacity: 0,
duration: 1,
delay: 0.5
});アニメーションを制御しているのは上記の部分です。
下線部のように、stagger: 0.1,などと記述します。（単位は「秒」です）
この場合、.boxがアニメーションを開始する時に、それぞれ0.1秒ずつの遅延が追加されます。
特に開始位置の指定などをしなければ、左端からアニメーションが開始されます。
開始位置を指定するなどの細かい設定は、staggerにプロパティを追加することで可能となります。
ここからはここからはデモを交えてプロパティを紹介していきます。
each , from
See the Pen stagger-02 by Michi (@Michi_) on CodePen.
gsap.from(".box",{
rotate: 360,
stagger: {
each: 0.1,
from: 18,
},
repeat: -1,
opacity: 0,
duration: 1,
delay: 0.5
});
staggerにプロパティを追加するときは、上記のコードのように、stagger: { },の{ }内に記述をします。
ここでは二つのプロパティを紹介します。
each
各アニメーションの開始間に遅延を追加します。単位は「秒」です。
この場合、.boxがアニメーションを開始する時に、それぞれ0.1秒ずつの遅延が追加されます。先ほどのstagger: 0.1,と同じ結果になります。
from
staggerの開始位置を指定できます。デフォルトは「０」です。
特定の要素から始めるためには、ターゲット配列内のその要素のインデックス番号を指定します。
配列は０から始まるインデックス番号を使用するため、from: 18,を指定した場合、左から19番目の要素からアニメーションが始まります。
また、それぞれの要素のアニメーションは、fromで指定された場所から近いものから順番にアニメーションが伝播していきます。
from: 18,の場合は、次がインデックス番号が17と19のもの、その次が16と20のもの・・というようにです。
また、インデックス番号のほか、"start", "center", "edges", "random" や "end"の文字列や、グリッドを定義している場合は、[0,0] が左上隅、[0.5,0.5] が中央、[1,1] が右下隅など、小数を使って各軸の位置を示すこともできます。
amount , grid
See the Pen stagger-03 by Michi (@Michi_) on CodePen.
gsap.from(".box",{
rotate: 360,
stagger: {
amount: 5,
grid: [5,15],
from: [0.3,0.6],
},
repeat: -1,
opacity: 0,
duration: 1,
delay: 0.5
});
amount
staggerアニメーションにかかる時間の全体量。（単位は「秒」です）
要素のひとつひとつに遅延時間を設定するのではなく、全体の時間を指定して要素の個数で割ることによって、遅延時間を計算します。
amount: 5,の場合は、staggerアニメーションの開始から終了まで５秒間かかることになります。
それぞれの要素の遅延時間が決まっているときはeachプロパティ、全体の時間が決まっているときはamountプロパティを使うといいと思います。
grid
要素がグリッド状に表示されているとき、どれだけ列数と行数があるかを示すことで、GSAPが近接性を計算できるようになります。
gridを指定しなければ、単純にインデックス番号が近い順に（つまり横方向に）アニメーションが伝播していきますが、gridを指定することで、横方向だけでなく、全方位にアニメーションを広げることができるようになります。
eachとfromプロパティを紹介した時のデモを見ていただくと、違いがわかると思います。
こちらのデモにはgridを指定していないので、要素はグリッド状に並んでいますが、インデックス番号の順番に、横方向にのみアニメーションが伝播しています。
axis
See the Pen stagger-04 by Michi (@Michi_) on CodePen.
gsap.from(".box",{
rotate: 360,
stagger: {
amount: 5,
grid: [5,15],
from: "center",
axis: "x",
},
repeat: -1,
opacity: 0,
duration: 1,
delay: 0.5
});axis
グリッドを定義する場合、staggerは、それぞれx軸とy軸からfromで指定した要素までの合計距離に基づきます。ひとつ前のデモで見たように、全方位に伝播する動きになるということです。
ですが、 axisで軸を指定することで、x軸とy軸どちらかにフォーカスを当てて動きを制御することができます。
ここではaxis: "x",としてx軸にフォーカスしました。
デモを見ると、x軸方向のみに動きが伝播していきます。
axis: "y",に変更すると、今度は中央からy軸、つまり縦方向にアニメーションが伝播するようになります。
ease
See the Pen stagger-05 by Michi (@Michi_) on CodePen.
gsap.from(".box",{
rotate: 360,
stagger: {
amount: 5,
grid: [5,15],
from: 5,
axis: "x",
ease: "power2.out",
},
repeat: -1,
opacity: 0,
duration: 1,
delay: 0.5
});ease
イージングを指定できます。
ここで指定できるのは、stagger全体に対するイージングです。
staggerの初めの要素のアニメーションが始まってから、最後の要素のアニメションが終わるまでの一連の流れにイージングがかかります。
repeat の設定について
See the Pen stagger-06 by Michi (@Michi_) on CodePen.
gsap.from(".box",{
scale: 0.1,
stagger: {
amount: 2,
grid: [5,15],
from: 5,
repeat: -1,
yoyo: "true",
},
repeat: -1,
yoyo: "true",
opacity: 0,
duration: 1,
delay: 0.5
});repeat や yoyo は、stagger の中に記述するか、外に記述するかで挙動が変わってきます。
ここでは stagger プロパティを使って制御する、ひとつひとつの要素 “.box” に対するアニメーションのことをサブトゥイーンと呼んで説明します。
赤色の下線部のようにstaggerの中に記述した場合、各サブトゥイーンが独立して繰り返すようになります。このデモの場合、”.box” の要素ひとつひとつが、それぞれアニメーションが終わったらすぐに繰り返します。
青色の下線部のように、staggerの外に記述した場合、すべてのサブトゥイーンが終了した後、staggerの初めの要素のアニメーションが始まってから、最後の要素のアニメションが終わるまでの一連の流れを繰り返します。
デモでは赤色下線部の記述を有効にしていますが、青色下線部の部分もコメントアウトで残しているので、ご自身で切り替えて、ぜひ動きの違いを確認してみてください。
また、repeatとyoyoの他、onUpdate、onComplete、onStartなどのコールバックにも同じことが当てはまります。
まとめ
この記事ではstaggerを使ったアニメーションを紹介しました。
stagger プロパティを使うことで、複数の要素に遅延を追加して、さまざまなアニメーションを作ることができます。皆さんもいろいろ試してみてくださいね！
コメント