GSAPのタイムラインを必要なタイミングで動かす

こんにちは、ナカムラです。
GSAPのtimelineアニメーションをスキップしたり、リプレイする処理は前回行いました。

tech.arms-soft.co.jp

scrollTriggerによって、特定の要素が表示されたタイミングでアニメーションする処理も書きましたね。

tech.arms-soft.co.jp

今回は、必要なタイミングでタイムラインを実行してみたいと思います。
とても簡単です。

DEMO

「STARTボタンを押したらアニメーションする」というのが今回やりたいことです。

See the Pen GSAPのタイムラインを必要なタイミングで動かす by Nakamura (@takayo-nakamura) on CodePen.

ポイント1：最初は止まっている

timelineはデフォルトでは読み込みと同時に動き出します。
そこで、つけておきたいオプションがpaused: trueです。

const starTl = gsap.timeline({
   paused: true
})

このように、timelineをセットする際にオプションとして書くと、読み込んだ時も止まった状態になります。

ポイント2：何度も繰り返し再生させたい

ボタンが「START」「PLAY」「PAUSE」の３種類用意しています。

startBtn.addEventListener('click', function () {
  starTl.restart()
})
playBtn.addEventListener('click', function () {
  starTl.play()
})
pauseBtn.addEventListener('click', function () {
  starTl.pause()
})

STARTボタンはrestart()、PLAYボタンはplay()、PAUSEボタンはpause()を実行します。
最初の1回はPLAYボタンでも再生しますが、2度目以降は再生されません。
play()はpauseしている状態から再生するだけなので、0の地点に戻すことはできません。
再生している間にPAUSEボタンを押すとその時点で止まり、PLAYボタンを押せば再生されます。

ボタンを押すたびに再生させたい場合は、restart()にする必要があります。

まとめ

“再生する”といっても、メソッドによって役割が違うので注意したいですね。