webコーダーのsaco @sacocco_sacoya です。

今日はGSAPのtimelineメソッドについて学びました。

Timelineは連続したアニメーションを作るためには必須のメソッドで、アニメーションが再生される順番を簡単に管理できるメソッドです。

Timelineと一緒に使用すると便利なaddLabelメソッドや、seekメソッドについても、後述していきます！

Timelineについて

GSAPのTimelineを利用すると、連続した流れをもつ複雑なアニメーションが簡単に作成、管理できるようになります。

テストとして、ファーストビューとして使用できそうなアニメーションを作成してみました。

See the Pen GSAP Timeline – test site by saco (@sunacodesu) on CodePen.

コード量はこれだけです。

//timelineメソッドを変数に格納
const timeLine = gsap.timeline()

timeLine
	//hero画像を0%から80%の高さまで広げる
  .fromTo('.hero',1, { height: '0%' }, { height: '80%', ease: 'power2.out' })
	//上記のアニメーションに「up」というラベルを命名
  .addLabel('up')
	//「up」ラベルのアニメーションが終了後、0.2秒後に左から背景を出現させる
  .fromTo('.background', 1, { x: '-100%' }, { x: '0%' }, 'up+=0.2')
	//「up」ラベルのアニメーションが終了後、1秒後にサイトロゴが降りてくる
  .fromTo('.siteName', 0.5, { opacity: 0, y: -20 }, { y: 0, opacity: 1, ease: 'back.out(2)' }, 'up+=1')
	//「up」ラベルのアニメーションが終了後、1.5秒後にアイコンが降りてくる
  .fromTo('.iconBox', 1, { opacity: 0, y: -20 }, { y: 0, opacity: 1, ease: 'back.out(2)' }, 'up+=1.5')
	//「up」ラベルのアニメーションが終了後、2秒後にメッセージが下から出現
  .fromTo('.msg', { y: '1.2em', opacity: 0 }, { y: 0, opacity: 1, stagger: { each: 0.05 } }, 'up+=2');

これだけ、といっても初めて見る方は多いと感じる事もあるかもしれませんが、アニメーションを１行ずつ指定しているだけで、記述内容はわりかしシンプルです。

以下、具体的な使い方をご説明していきます。

Timelineの使い方

timelineメソッドに、.toや.fromToなどのメソッドを繋げて記述していきます。

gsap.timeline()
.to('.box.red', 0.5, {
	x:100
})
.to('.box.blue', 2, {
	x:100
})

このままでも作成することができるのですが、変数にtimelineメソッドを格納して、アニメーションに名前を付けて管理していく形が基本のようです。

const timeLine_01 = gsap.timeline()
const timeLine_02 = gsap.timeline()
const timeLine_03 = gsap.timeline()

timeLine_01.to('.box')//...以下省略

timeLine_02.to('.box')//...以下省略

timeLine_03.to('.box')//...以下省略

こうすることで複数のTimelineを作成したいときなど、管理が便利です。
（上記命名は例として数字を振り分けています。）

Timelineを使うメリット

toメソッドやfromメソッドだけでアニメーションを作成していくこともできますが、連続したアニメーションを作成したい場合に、順番や秒数の制御などがしづらくなってしまいます。

Timelineを使えばそれらの制御が簡単になります。

Timelineを使用しない場合

GSAPのアニメーションでは、delayで秒数を指定しない限り、すべてのアニメーションが同時に再生されます。

Timelineを使用せずに、順番をつけて再生させるには、１つ１つのアニメーションの指定内に、delayで秒数を計算し、調整する必要があります。

gsap.to('.box.red',{
  x:100
})
gsap.to('.box.blue',{
  x:100,
  delay:1
})
gsap.to('.box.red',{
  x:0,
  delay:2
})
gsap.to('.box.blue',{
  x:0,
  delay:3
})

この記述方法でも作成できますが、秒数を変更したくなったときに、すべてのdelayを１つずつ計算して調整しなおさなくてはならなくなるため、管理がとても大変です。

↓Timelineを使用しない場合の挙動例

See the Pen GSAP Timeline を使用しない場合 by saco (@sunacodesu) on CodePen.

Timelineを使用した場合

Timelineを使用すると、１つのアニメーションが終わったあとに次のアニメーション、という風に、記述した順番で再生されるので、delayによる秒数の計算や指定が不要になります。

//Timelineの初期化
const timeLine = gsap.timeline()

timeLine.to('.box.red', 1, {
  x:100
})
.to('.box.blue', 1, {
  x:100
})
.to('.box.red', 1, {
  x:0
})
.to('.box.blue', 1, {
  x:0
}).repeat(-1)

また、timelineの中にひとまとまりでアニメーション指定を書けるので、コードの見通しがよくなります。

↓Timelineを使用した場合の挙動例

See the Pen GSAP Timeline by saco (@sunacodesu) on CodePen.

また、timelineメソッドの最後にrepeatメソッドを繋げて指定すると、アニメーションの流れ全体として繰り返し指定を行うことができるなど、様々な面で管理が非常にしやすくなります。

※ repeatメソッドとは、アニメーションの繰り返し処理を作成できるものです。
詳しく知りたい方はこちらの記事をご覧ください↓

GSAP リピート(繰り返し)メソッド repeat / repeatDelay / yoyo / yoyoEase

GSAPで繰り返しアニメーションを作成する際に使えるメソッドをご紹介しています。

Timelineと合わせて使うと便利なメソッド

addLabel()

Timelineで作成したアニメーションは、ラベル（名前）をつけて管理することが可能です。

timeLine.to('.box', {
	x:100
})
//ラベルを貼り付け
.addLabel('move')
.to('.box',{
  y:100
})
.to('.box',{
  x:0
},
//ラベルを紐付け（ラベルを付けたアニメーションが終了後、すぐに再生）
  'move')

まずはじめに、基準としたいアニメーションにaddLabel（addという記述でも可）メソッドを繋げて、引数の中にラベル名を記述します。

紐付けをしたいアニメーションの最後の引数に、ラベル名を記述すると、ラベルを付けたアニメーションが再生がされたあと、紐付けたアニメーションがすぐに再生されます。

See the Pen GSAP Timeline 練習 by saco (@sunacodesu) on CodePen.

上記例では、

• １番初めのアニメーションに「move」というラベルを作成
• 他のアニメーションにすべて「move」ラベルを紐付け
• ラベルが付いたアニメーション再生後、ラベルを紐付けたアニメーションが同時に再生

という流れで作成してみました。

また、ラベルは必要に応じて好きな数だけ作成＆指定することが可能です。

ラベルには発火のタイミングを指定できる

ラベル指定のあとに発火タイミングの指定をすることで、ラベルのついたアニメーションを基準に、どのタイミングから再生するかを指定することができます。

//...timelineとaddLabellの記述を省略...
.fromTo('.box.green', 2,
  { height: '50px'},{ height:'200px'}
  //moveラベルのついたアニメーションが再生されたあと1秒後に再生
, 'move+=1')
.fromTo('.box.yellow', 2,
  { height: '50px'},{ height:'200px'}
  //moveラベルのついたアニメーションが再生される1秒前に再生
, 'move-=1')

上記のような書き方になります。

See the Pen GSAP Timeline – addLabel (秒数指定付き) by saco (@sunacodesu) on CodePen.

ラベルに秒数を指定したアニメーションを作成してみました。

上記例では、

赤→黄→青→緑

という順番で箱が伸びます。

• 赤のアニメーションが終わったあとに、青が再生
• 赤が再生されてから1秒後に、緑が再生
• 赤が再生されている途中で、黄色の再生が始まる

黄色は「−（マイナス）」を指定することで、赤が再生されている途中から、巻きで再生されていることがわかります。

このような形で、各アニメーションにラベル付け＋秒数指定をすることで、より柔軟なTimelineアニメーションを作成することができます。

※注意点※

ラベルに数値を付ける場合、ラベルと記号の間にスペースが入ると動かなくなるので、注意が必要です。

//ラベルと記号の間に空白があると挙動しません。
‘ラベル +=数値’

seek()

seekメソッドは、アニメーションを一時停止の状態にすることができるメソッドです。

引数に秒数や、addLabelで作成したラベルを指定することで、任意の箇所でアニメーションを停止した状態にできますので、アニメーションの細かな状態を確認したいデバッグ時などに有効活用できるものになります。

以下の例では、

• 赤いボールのバーは2秒の位置から再生
• 青いボールのバーはラベルをつけた位置から再生

するような指定にしています。
直線だと動きが分かりづらいかと思い、ボールが宙に浮いて戻る、といった形にしてみました。

See the Pen GSAP Timeline – seek と addLabel(2) by saco (@sunacodesu) on CodePen.

また、pause().seek(‘指定’)といった形で記述すると、pauseメソッドによって一時停止した状態で確認することもできます。

このように、seekメソッドを上手く使用すれば、任意の箇所で停止してアニメーションの状態を確認したり、任意の位置から再生させたりすることが簡単にできるようになります。

これらのメソッドを利用すれば、アニメーションの挙動確認のために、何度も読み込んで確認する必要がなく、ピンポイントで狙った位置の確認ができるので大変便利だと思います。

↓seekメソッドやpauseメソッドなど、再生機能に関するメソッドを詳しく紹介した記事もありますので、ぜひ参考にしてみてください。

GSAP コントローラーを作って学ぶアニメーション。再生 / 一時停止 / 逆再生 etc

webコーダーのsaco @sacocco_sacoya です。 今日はGSAPの再生や一時停止、逆再生など、コントローラーのような動きに関する…

複数のTimelineを連結させる方法

Timelineを複数作り、各Timelineを繋げて再生させることも可能です。
addメソッドを使用して、以下のように記述します。

//Timelineの初期化
const timeLine_01 = gsap.timeline()

const timeLine_02 = gsap.timeline()


timeLine_01.to('.box.red',{
//省略
})

timeLine_02.to('.box.blue',{
//省略
})

//addメソッドでtimeline同士を連結
timeLine_01.add(timeLine_02)

↓サンプルとしてアニメーションを作成してみました。

See the Pen GSAP Timeline 連結 by saco (@sunacodesu) on CodePen.

Timelineのネスト化

Timelineを関数化したものを、timelineメソッドの中へ格納すると言った形で、Timelineを入れ子（ネスト化）して管理することが可能です。

//timeline_01を関数化
function anime_01(){
  //Timelineの初期化
  const timeLine_01 = gsap.timeline()

    timeLine_01.to('.box.red',1,{
      y:-20
    })
    .to('.box.red',1,{
      y:0,
      opacity:1,
    })
    return timeLine_01
}

//timeline_02を関数化
function anime_02(){
  //Timelineの初期化
  const timeLine_02 = gsap.timeline()

  timeLine_02.to('.box.blue',1,{
    y:-20
  })
  .to('.box.blue',1,{
    y:0,
    opacity:1
  })
    return timeLine_02
}

//timelineメソッドの中にaddメソッドで関数を連結させ、変数に代入
const nestTest = gsap.timeline()
.add(anime_01())
.add(anime_02(),
//発火タイミングを指定することも可能
'-=1')

//変数に代入した各タイムラインに対して、さらにメソッドで挙動を指定する
nestTest.play().yoyo(true).repeat(-1)

順序としては以下です。

• timeLine_01とtimeLine_02をanime_01、anime_02として関数化
• 新しいtimelineメソッドにaddメソッドで関数を連結させ、変数に代入
• 変数の中に格納されたアニメーションに対して、playやrepeatなどを指定してく

一見複雑なようですが、関数化されたTimelineをさらに新たなTimelineに入れ子にすることで、流れの把握＆管理がしやすくなると思います。

関数化したものはいわゆるアニメーションのパーツで、パーツ化したものを繋げていくといった形だと考えるとわかりやすいかもしれません。

複雑で長いアニメーションを作成するときなどは、こういった記述方法を利用するとよいと思います。

↓ネスト化したTimelineアニメーションです。

See the Pen GSAP Timeline timelineのネスト by saco (@sunacodesu) on CodePen.

まとめ

• Timelineを使用することで、複数のアニメーションを連結して再生できる
• Timelineは秒数指定がなければ、記述順に再生されていく
• 変数にtimelineメソッドを格納することで、複数のTimelineが作成可能
• Timelineを使用することで、delayによる秒数計算が不要になる
• addLabelでラベルを付けてアニメーションを管理することができる
• addLabelでラベル付けしたアニメーションには、発火タイミングを指定できる
• TimeLineは関数化して入れ子にすることができる

GSAPのtimelineメソッドを使用すると、複雑なアニメーションも簡単に作成できることがわかりました。色々な指定やメソッドを利用することで、より柔軟なアニメーション作成を楽しめそうです。

この記事がGSAPでアニメーションを作成する際、お役に立てば嬉しいです！

本日は以上です。