こんにちは、ナカムラです。
GSAPのtimelineアニメーションをスキップしたり、リプレイする処理は前回行いました。
scrollTriggerによって、特定の要素が表示されたタイミングでアニメーションする処理も書きましたね。
今回は、必要なタイミングでタイムラインを実行してみたいと思います。
とても簡単です。
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」の3種類用意しています。
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()にする必要があります。
まとめ
“再生する”といっても、メソッドによって役割が違うので注意したいですね。