GSAPのtimelineアニメーションをスキップする

こんにちは、ナカムラです。
今回もGSAPの使い方についてご紹介します。
前回の記事でtimelineの使い方をご説明しました。

tech.arms-soft.co.jp

このtimelineを使うと、一連のアニメーションを作ることができます。
サイトのオープニングアニメーションなど、少し長めのアニメーションを作る時にも使います。
ただ、ユーザーの目的によってはすぐにコンテンツを見たい場合もあります。
長めのアニメーションはスキップする機能も用意しておくと親切です。
そこで今回はスキップボタンの作り方をご紹介します。

DEMO

See the Pen Gsapのtimelineアニメーションをスキップする by Nakamura (@takayo-nakamura) on CodePen.

ページを開くと同時にアニメーションします。
右上にSKIPボタンとREPLAYボタンもつけてみました。
どちらも同じメソッドを使用しています。
※星の回転は動き続けます

.seek()を使ったスキップ

スキップボタンの要素を取得し、クリックイベントを付与します。
クリックされたらopeningTlに対して、.seek(openingTl.endTime())を実行します。

// skip
const skipBtn = document.querySelector('.skipBtn')
skipBtn.addEventListener('click', function () {
  openingTl.seek(openingTl.endTime())
})

.seek()は特定の時間にジャンプするメソッドです。
timelineの最後にジャンプするとスキップすることになり、最初にジャンプするとリプレイになります。

.seek()：seek | GSAP | Docs & Learning

最初の戻る時は0で良いですね。（最初に戻る場合は、.restart()というものもあります。）
では最後はいくつになるでしょうか？
アニメーションとして設定した時間を一つ一つ足して計算しても良いですが複雑になると難しいですよね。更新した時も面倒です。

.endTime()で終了時間を取得する

そこで便利なのが.endTime()です。
親タイムラインのローカル時間に従って、アニメーションが終了する時間を返してくれますので、
この値を.seek()にセットすれば、終了時間にスキップさせることができます。
※timelineに星が回転する動き（ループ）を入れると、回転の動きも止まるため、動かし続けるためにtimelineとは別に記述しています。逆に止めたい場合はtimeline内で記述してください。

.endTime()：endTime | GSAP | Docs & Learning