GSAPのtimelineアニメーションを逆再生する

こんにちは、ナカムラです。以前の記事でtimelineをスキップするメソッドをご紹介しました。

tech.arms-soft.co.jp

今回は逆再生をしてみたいと思います。

DEMO

See the Pen GSAPのtimelineアニメーションを逆再生する by Nakamura (@takayo-nakamura) on CodePen.

アニメーション自体はスキップの時とほとんど同じです。
※逆再生した時に分かりやすいように回転はなくしています。

reverseBtnをクリックした時のメソッド

  animationTl.reverse()

.reverse()を使用しました。これだけでアニメーションの終わりからアニメーションを逆再生してくれます。

逆再生の用途

アコーディオンのように開閉する時のアニメーションに使えます。
その他にはスクロールに合わせて、対象の要素が表示されたら（onEnter）通常のアニメーションを開始、折り返しスクロールして離れた時（onLeaveBack）には逆再生する、という動きも可能です。

  scrollTrigger: {
      trigger: '.contents', 
      start: 'top bottom', 
      end: 'bottom top', 
      onEnter: () => {
        animationTl.restart()
      },
      onLeaveBack: () => {
         animationTl.reverse()
      }
    }

※onイベントの使い方についてはこちらの記事で説明しています。 tech.arms-soft.co.jp

おまけの便利な機能：タイムラインが終わった時

scrollTriggerのonEnterやonLeaveBackのように、timelineにもonイベントがあります。

アニメーションが終わったら実行する（onComplete）

const animationTl = gsap.timeline({
     onComplete: () => {
        // 動かしたい処理を記述
      }
})

こちらは通常のアニメーションが終了したタイミングで実行するイベントです。

逆再生アニメーションが終わったら実行する（onReverseComplete）

const animationTl = gsap.timeline({
     onReverseComplete: () => {
        // 動かしたい処理を記述
      }
})

こちらは逆再生のアニメーションが終了したタイミングで実行するイベントです。
アニメーションの向きによって終了時の処理を変えたい時に便利です。

他にもonイベントは色々ありますので、詳しくは公式サイトをご覧ください。
gsap.timeline() | GSAP | Docs & Learning

まとめ

これまでの記事で再生・スキップ・逆再生などをご紹介してきました。
どれもtimelineで作ったアニメーションを初期ではpause:tureで止めておき、任意のタイミングで再生したり戻したりとコントロールしています。
組み合わせ次第でより複雑な動きや表現が可能になってきますので、動きの手順をよく整理して活用していきたいですね。