【GSAP】タイムラインを使えば複雑なアニメーションを実装できる

2022.10.01

2022.12.18

GitHub

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

GSAPで複雑（連続的）なアニメーションを実装できるタイムラインについて解説します。

これまでsetTimeout()で作成している人が多かったと思いますが、タイムラインを使えばもっとシンプルでわかりやすく記述することができます。

この記事では、

・基本的な記述
・主に使用するメソッド
・発火タイミングの管理
・タイムラインのオプション
・タイムラインのネスト

がわかります。

こんなアニメーションができます

例えば次のようなアニメーションができます。
わずか5行で実装できます。

実装サンプル

JavaScript
gsap.timeline()
.fromTo('.hero', 1, { paddingTop: '0%' }, { paddingTop: '40%', ease: Power4.easeInOut })
.fromTo('.hero', 1.2, { width: '100%' }, { width: '80%', ease: Power4.easeInOut })
.fromTo('.bg', 1.2, { y: '-100%' }, { y: '0%', ease: Power2.easeInOut }, '-=1.2')
.fromTo('.headline', 0.5, { autoAlpha: 0, x: 0 }, { autoAlpha: 1, x: 30 }, '-=0.5');

基本的な記述

gsap.timeline()に対してトゥイーンをつなげるように記述します。

JavaScript
gsap.timeline()
.fromTo('.box', .8, { autoAlpha: 0, y: 30 }, { autoAlpha: 1, y: 0 })
.to('.box', 1, { x: 30 })
.to('.box', .5, { y: 100, rotate: 360 });

実装サンプル

gsap.timeline()を変数に格納して使用することもできます。

JavaScript
const tl = gsap.timeline();
 
tl.fromTo('.box', .8, { autoAlpha: 0, y: 30 }, { autoAlpha: 1, y: 0 })
.to('.box', 1, { x: 30 })
.to('.box', .5, { y: 100, rotate: 360 });

実装サンプル

主に使用するメソッド

使用することが多いのは次のメソッドです。

関数名	説明
`add()`	トゥイーン、タイムライン、コールバック、ラベルをタイムラインに追加します。
`to()`	終点の状態を指定します。例.)今の状態からx方向に30px移動
`from()`	始点の状態を指定します。例.)今の状態からx方向に30px移動
`fromTo()`	始点と終点を指定します。例.)xが30pxの状態からx方向に-30px移動
`set()`	値を指定します。アニメーションはせずCSSでスタイルをあてるような感じです。

発火タイミングの管理

アニメーションの発火タイミングを調整することでより完成度の高いアニメーションを実装することができます。
他にも%で指定できたり、ラベルというものを使って指定できます。
使用することが多いのは次の指定方法かと思います。

設定値	説明
`1`	タイムラインの先頭からの時間
`+=1`	直前のトゥイーンの終了後からの時間
`-=1`	直前のトゥイーンの終了にオーバーラップする時間
`<`	直前のトゥイーンの開始時
`<1`	直前のトゥイーンの開始時からの時間
`>`	直前のトゥイーンの終了時
`>1`	直前のトゥイーンの終了後からの時間

他の指定方法も詳しく知りたい人は公式サイトを参考にしてください。

JavaScript
// 発火タイミング指定なし
gsap.timeline()
.fromTo('.off .box', .8, { autoAlpha: 0, y: 30 }, { autoAlpha: 1, y: 0 })
.to('.off .box', 1, { x: 50 })
.to('.off .box', .5, { y: 100, rotate: 360 });
 
// 発火タイミング指定あり
gsap.timeline()
.fromTo('.on .box', .8, { autoAlpha: 0, y: 30 }, { autoAlpha: 1, y: 0 })
.to('.on .box', 1, { x: 50 }, '+=3')
.to('.on .box', .5, { y: 100, rotate: 360 }, '-=1');

実装サンプル

タイムラインのオプション

タイムラインの開始を数秒遅らせたいとか繰り返したいとかの時に指定します。
ここでもよく使いそうなオプションだけ。
他の指定方法も詳しく知りたい人は公式サイトを参考にしてください。

オプション	設定値	説明
`delay`	秒数	アニメーションの開始を遅らせる
`paused`	ブーリアン	`true`に設定すると、アニメーション作成直後に一時停止
`repeat`	数値	アニメーションが繰り返される回数 `-1`で無限ループ
`repeatDelay`	数値	ループ間の待ち時間
`yoyo`	ブーリアン	`true`に設定すると、アニメーション奇数回目は再生、偶数回目は逆再生する。

JavaScript
// 開始を遅らせる
gsap.timeline({ delay: 3 })
.fromTo('.box.delay', .8, { autoAlpha: 0, y: 30 }, { autoAlpha: 1, y: 0 })
.to('.box.delay', 1, { x: 50 })
.to('.box.delay', .5, { y: 100, rotate: 360 });
 
// 繰り返す
gsap.timeline({ repeat: 3 })
.fromTo('.box.repeat', .8, { autoAlpha: 0, y: 30 }, { autoAlpha: 1, y: 0 })
.to('.box.repeat', 1, { x: 50 })
.to('.box.repeat', .5, { y: 100, rotate: 360 });
 
// 反復させる
gsap.timeline({ yoyo: true, repeat: 4 })
.fromTo('.box.yoyo', .8, { autoAlpha: 0, y: 30 }, { autoAlpha: 1, y: 0 })
.to('.box.yoyo', 1, { x: 50 })
.to('.box.yoyo', .5, { y: 100, rotate: 360 });

実装サンプル

タイムラインのネスト

タイムラインは入れ子にすることができます。
タイムラインはコードが長くなり、可読性が悪くなりがちです。
入れ子を上手に使えば可読性の高いコードになるでしょう。

使わなくても実装できるので、慣れるまで使わなくても良いとも思います。

JavaScript
gsap.timeline()
.fromTo('.box', .8, { autoAlpha: 0, y: 30 }, { autoAlpha: 1, y: 0 })
.to('.box', 1, { x: 30 })
.to('.box', .5, { y: 100, rotate: 360 })
.add(nest('.box'));
 
function nest(target){
    const tl = gsap.timeline()
    .to(target, .8, { x: 0, rotate: 270 })
    .to(target, .8, { y: 0 });
 
    return tl;
}