GSAP Timelineの使い方

GSAPでよく使う機能と言ったらTimelineです。この機能によってアニメーションをAfter EffectsやPremiere Proのような動画編集に使うタイムラインと同じようにコントロールできます。連続的なアニメーションを実装するときはかなり便利な機能になってきます。今回はそのTimelineの使い方をご紹介していきます。最後に全てをまとめたCodepenもあるので学んだ後にご自身で確認してみてください。 GSAPの全体的な基本の使い方はこちらでご紹介していますので、よかったら立ち寄ってください。

GSAPの基本的な使い方を一緒に学ぼう！

Timelineの使い方

導入編

Timelineは他のプラグインとは違ってGSAPに標準で搭載されている（GSAP Core）ので、GSAPを読み込んでしまえば使えます。

Timelineを使わない場合

もし、このような複数のアニメーションを連続で実装したいとします。

右に100px移動
scaleで2倍に拡大しながら、時計回りに回転
元の位置に元の大きさに戻りながら戻る

gsap.to(".box",{
x:100
},0); //0秒後に作動

gsap.to(".box",{
scale: 2,
rotate: 90
},1);　//1秒後に作動

gsap.to(".box",{
x:0,
scale: 1,
rotate: 0
},3);　//3秒後に作動

Timelineを使わないで書くとこのようになります。作動するタイミングを一番最後に追加して連続的なアニメーションを実装できます。これがないと最後のアニメーションだけになりますし、もし変更があるときに全体的に数字を変更する必要があります。そこでTimelineの出番です。Timelineを使うことで更にシンプルに連続的なアニメーションを実装できます。

Timelineを使った書き方

先程のアニメーションをTimelineを使って書き直してみます。

var tl = gsap.timeline()

tl.to(".box", {
      x: 100
})
.to(".box", {
      scale: 2,
      rotate: 90
})
.to(".box", {
      x: 0,
      scale: 1,
      rotate: 0
});

このように書きます。これだけで上のアニメーションから順に連続でアニメーションが作動します。そして、前のアニメーションが完了したら次のアニメーションが作動します。とても見やすくシンプルなコードになりましたね。書き方の注意点としては、この2つです。

それぞれのアニメーションをセミコロン（；）で分けない
Timelineの変数は一番最初だけ必要、あとは書かなくていい

もし間違っていても動かないか、GSAPがコンソール画面でどこか間違えていると教えてくれます。

もしアニメーション順番を変えたい場合

先程話したように、Timelineの上から順にアニメーションが作動するので順番を入れ替えればいいだけです。

var tl = gsap.timeline()

tl.to(".box", {
　　　x: 100
})
　.to(".box", {　//元々３番目
　　　x: 0,
　　　scale: 1,
　　　rotate: 0
})
　.to(".box", {　//元々２番目
　　　scale: 2,
　　　rotate: 90
});

Timelineの最大の特徴　タイミングを設定する

例えば次のアニメーションを前のアニメーションが完了した３秒後に作動させたいとします。もしTimelineを使わなければ、２つのアニメーションのタイミングを変える必要があります。ですが、Timelineを使えば１箇所だけ変更するだけで間に合います。では基本の使い方をご紹介します。１　○秒後にアニメーションを作動させたい。

tl.to(".box", {x: 100}, 3)  //３秒後に作動
  .to(".box", {y: 100}, 1)  //１秒後に作動

一番最初に話したやり方に似ていますね。このように入力するとTimeline上の順番関係なしにアニメーションが開始します。なので、下のコードが１秒後なので先に作動します。２　前のアニメーションの〇〇秒後に作動させたい

tl.to(".box", {x: 100})  
  .to(".box", {y: 100},"+=3")  //前のアニメーション完了後、３秒後に作動

このように入力します。もし前のアニメーション完了前の３秒に作動させたい場合はマイナス（-）で入力します。この書き方の利点は、前のアニメーションの長さがいくら変更されても３秒後に動作するところです。３　複数のアニメーションを同じタイミングで作動させたい

tl.to(".box", {x: 100})               // 1
  .to(".box", {y: 100},"douji")       // 2
  .to(".box", {rotate: 180},"douji")  // 2
  .to(".box", {x: 200})               // 3
  .to(".box", {y: 400},"douji")       // 2

タイミングにラベルを付けることで、同じラベルを持ったアニメーションは同時に作動させることが出来ます。Timeline上の一番上にあるラベルが作動したタイミングで他のアニメーションも作動します。もしそのラベルを持ったアニメーションの〇〇秒後にアニメーションを動作させたい場合はこのように書きます。

tl.to(".box", {x: 100})               
  .to(".box", {y: 100},"douji")       
  .to(".box", {rotate: 180},"douji+=4")  // douji作動後４秒後
  .to(".box", {x: 200})               
  .to(".box", {y: 400},"douji-=2")       // douji作動後２秒前

ラベルの〇〇秒後と考えればわかりやすいですよね。４　前のアニメーションと同時に作動させる

tl.to(".box", {x: 100}) 
  .to(".box", {y: 100},"<")   //上のアニメーションと同時に作動

この括弧（<）を追加するだけで前のアニメーションと同時に作動します。逆の括弧（>）もあるのですが、個人的に使い方がよくわからないのでもし知っている方教えて下さい。さらに先程と同じようにこのように書くとアニメーションに時間差を加えられます。

tl.to(".box", {x: 100}) 
  .to(".box", {y: 100},"<5")   //上のアニメーションと同時に作動するが５秒後

少しだけ今までと書き方が違うので、注意が必要です。６　Timeline全体をリピートする

var tl = gsap.timeline({repaet: -1 });

一連の流れをリピートするときはこのように書くか、下のように書きます。これでタイムライン全体の設定を変更することが出来ます。

tl.repeat(3)

-1だと無限にリピートされますが、整数を入力すればその数だけアニメーションを繰り返します。これで基本的なTimelineの使い方のご紹介は終わりです。詳しい詳細は公式サイトで確認してください。後々に応用的な使い方をご紹介できたらと思います。今回のチュートリアルはこちらのCodepenにまとめて置いたので、右上のリンクから色々いじって見てください。

See the Pen Becre8 – GSAP TImeline – by Shunya (@shunyadezain) on CodePen.

これからもGSAPのチュートリアルをご紹介できたらと思います。ではまた！おすすめ本

リンク