【GSAP】アニメーションの順番やタイミングを管理する

GSAPでは、timelineという、あらかじめ決められた順番でアニメーション処理を行うためのツールがあります。このツールを使用することで、アニメーションの順番やタイミングを簡単に管理することができます。

もちろんタイムラインを使わなくてもアニメーションの順番やタイミングを管理することもできますが、その場合、以下のように全てのアニメーションにdelayを設定しなければなりません。
しかも、最初のアニメーションの長さを少し伸ばしたい、などとなった場合には、それ以降のアニメーションのdelayを計算し直す必要があります。

タイムラインを使えば、このような手間がかからず簡単にアニメーションを管理することができるようになります。

タイムラインの使い方
1. sample01
2. sample02
アニメーションのタイミングを設定する
まとめ

タイムラインの使い方

See the Pen timeline by Michi (@Michi_) on CodePen.

//sample01
var tl01 = gsap.timeline();
 tl01.to(".sample01",{x: 100, duration: 1});
 tl01.to(".sample01",{y: 100, duration: 1});
 tl01.to(".sample01",{x: 0, duration: 1});
 tl01.to(".sample01",{y: 0, duration: 1});


//sample02
var tl02 = gsap.timeline({repeat: -1, repeatDelay: 0.5});
 tl02.to(".sample02",{x: 100, duration: 1});
 tl02.to(".sample02",{y: 100, duration: 1});
 tl02.to(".sample02",{x: 0, duration: 1});
 tl02.to(".sample02",{y: 0, duration: 1});

sample01

sample01のコードを説明します。
まずはじめに、以下のようにタイムラインを作成します。

var tl01 = gsap.timeline();

次に、作成したタイムラインにアニメーションを記述していきます。

 tl01.to(".sample01",{x: 100, duration: 1});
 tl01.to(".sample01",{y: 100, duration: 1});
 tl01.to(".sample01",{x: 0, duration: 1});
 tl01.to(".sample01",{y: 0, duration: 1});

デフォルトでは、ひとつ目のアニメーションが終わったらふたつめのアニメーションが始まり、ふたつめのアニメーションが終わったらみっつ目のアニメーションがはじまる、というように、記述した順番にアニメーションが再生されます。アニメーション間の遅延はありません。

アニメーション間の遅延を設定したい場合は、delayプロパティで個別に設定してください。

これが基本の形になります。

sample02

次にsample02をご覧ください。

sample02のタイムラインを見ていただくとわかるように、タイムラインにプロパティを設定することで、アニメーションにさまざまな効果をつけることもできます。

var tl02 = gsap.timeline({repeat: -1, repeatDelay: 0.5});

ここで設定したものは、タイムライン全体に対する効果です。

例えば、sample02の場合は、タイムラインの中に４つのアニメーションが設定されているので、

 tl02.to(".sample02",{x: 100, duration: 1});    // ①
 tl02.to(".sample02",{y: 100, duration: 1});    // ②
 tl02.to(".sample02",{x: 0, duration: 1});         // ③
 tl02.to(".sample02",{y: 0, duration: 1});         // ④

①→②→③→④→①→②→③→④→①→②・・・となり、タイムラインが１回終わるごと、つまり④と①の間に0.5秒の遅延が発生します。

例えば、「yoyo: “true”」と設定すると、アニメーションが再生される順番は①→②→③→④→④→③→②→①→①→と、タイムラインが丸ごと逆再生されるようになります。

アニメーションのタイミングを設定する

タイムラインはあくまでも記述した順にアニメーションを再生するものですが、例えば、２つのアニメーションを同時に再生したい、というようなことにも対応することができます。

まずはサンプルをご覧ください。

See the Pen timeline02 by Michi (@Michi_) on CodePen.

テキストを順番にフェイドイン、フェイドアウトさせるアニメーションを作成してみました。

フェイドインの際は何も設定せず、記述した順にアニメーションが再生されています。
フェイドアウトの際は、それぞれ設定を付け加えて、アニメーションのタイミングをコントロールしました。

コードは以下のようになっています。

var tl = gsap.timeline({repeat: -1, repeatDelay: 0.5, defaults: { opacity: 0, duration: 1}});

tl.from(".text01",{x: 100});
tl.from(".text02",{x: -100});
tl.from(".text03",{x: 100});
tl.from(".text04",{x: -100});
tl.from(".text05",{x: 100});
tl.from(".text06",{x: -100});

tl.to(".text01",{x: -100});
tl.to(".text02",{x: 100}, "+=0.5");
tl.to(".text03",{x: -100}, "-=0.5");
tl.to(".text04",{x: 100}, ">-0.5");
tl.to(".text05",{x: -100}, "<");
tl.to(".text06",{x: 100}, ">");

赤色のマーカーで印をつけた部分が、設定を付け加えた箇所です。
ここで設定したタイミングでアニメーションが始まります。

“+=0.5”　・・・　前のアニメーションが終わってから0.5秒後
　　　　　　　　　つまり、0.5秒の遅延が発生します。

“-=0.5”　・・・　前のアニメーションが終わる0.5秒前
　　　　　　　　　前のアニメーションと、0.5秒間アニメーションが重なります。

“<“　・・・　前のアニメーションが始まる時
　　　　　　　前のアニメーションと同じタイミングでアニメーションが始まります。

“>”　・・・　前のアニメーションが終わった時
　　　　　　　前のアニメーションが終わったタイミングでアニメーションが始まります。

また、“<“や“>”は、記号の後に数字を設定することで、○秒後、あるいは○秒前と細かく設定することも可能です。

“>-0.5”
例えば、このように記述することで、前のアニメーションが終わる0.5秒前にアニメーションの開始を設定することができます。

“<3”
上記のように記述すれば、前のアニメーションが始まってから3秒後にアニメーションを開始できます。