Vue.jsでGSAPを使う方法

GSAPはCSSベースのアニメーションに特化したJavaScriptアニメーションライブラリです。
Vue.jsでGSAPを使う方法をまとめました。

Vue.jsでのGSAPの使い方

インストール

まずはインストールします。

npm install gsap

インポート

scriptタグの中で次のようにインポートします。

import gsap from 'gsap'

インポートすることで、scritpタグの中でGSAPを使うことができます。

GSAPの使い所

Vue.jsではtransitionコンポーネントを使ってJavaScriptのフックを使うことで複雑なトランジションを作成することができます。
ただし、直感的に使えるかというと、そうではありません。
たとえば、次のようにタイトル部分にtransitionコンポーネントを設定したとします。

    <transition
      appear
      @before-enter="beforeEnter"
      @enter="enter"
      >
      <h1 v-if="showTitle">About</h1>
    </transition>

そして、これをbefore-enterとenterの間でopacityを徐々に変化させたいとします。
そして、下のように設定するとします。

export default {
  setup() {
    const showTitle = ref(true)

    const beforeEnter = (el) => {
      console.log('beforeEnter');
      el.style.opacity = 0
    }

    const enter = (el) => {
      console.log('Enter', el);
      el.style.opacity = 1
    }

    return {
      showTitle,
      beforeEnter,
      enter,

    }
  }
}

そうすると、enterのときに即座にパッと表示されてしまい、徐々に変化しません。
そこでGSAPを使います。

GSAPの使い方

gsapでまずはとてもよく使うメソッドであるtoメソッドを例にみていきます。
上の例のenterを次のようにします。

    const enter = (el) => {
      console.log('Enter', el);
      // el.style.opacity = 1
      gsap.to(el, {
        duration: 3,
        y: 0,
        opacity: 1,
        ease: 'expo.out'
      })
    }

gsapは、第一引数に要素をとり、第二引数にはオブジェクトをとります。
そのオブジェクトに、アニメーションを適用したいcssプロパティをいれます。

GSAPでは、transformのtranslateXはx、translateYはyとすることで指定できます。
また、Xパーセント（xPercent）、Yパーセント（yPercent）と指定することでパーセントの設定が可能です。

easeのexpo.outに関しては、他にもたくさん種類があって、指定するだけで使えるので大変便利です。
GSAPの公式サイトで確認できます。

GSAPのよく使うメソッド

アニメーションの終わりをVueに知らせる

上の場合、enterにトランジションにdurationが3秒設定されています。
しかし、そのdurationをVueが理解することはなく、after-enterはenterの途中で実行されてしまいます。
そこで、enterで要素だけではなく、終わりを示す引数も合わせて設定しておきます。

    const enter = (el, completed) => {
      console.log('Enter', el);
      // el.style.opacity = 1
      gsap.to(el, {
        duration: 3,
        y: 0,
        opacity: 1,
        ease: 'expo.out',
        onComplete: completed
      })
    }

    const afterEnter = (el) => {
      console.log('afterEnterが発火');
    }

上の場合、enterの第二引数にcompletedという変数を指定し、アニメーションの終了を知らせるonCompleteに指定することで、Vueにアニメーションの終了を伝えることができます。
よって、上の場合、3秒後にafterEnterが発火するようになります。