NuxtJs(Vue)でオープニングアニメーションを実装したい時に以下のようなケースに遭遇すると思います。

1.オープニングアニメーション発火
2.オープニングアニメーションが終わったらメインビジュアルなどのアニメーション発火

上記のような形を実装するのは簡単なのですが、2回目以降オープニングアニメーション(以降OPと書きます)を表示させない場合は、OPの時間分遅延してしまい空白時間が生まれてしまいます。

今回はその空白時間をなくすための1つの方法を紹介します。

store/index.js

まずは状態管理フラッグをstoreにて記述していきます。

export const state = () => ({
  flag: false,
})
export const mutations = {
  increment(state) {
    state.flag = true
  },
}

簡単に説明すると、flagが以下の場合処理を変えます。
false = OP分の時差のある処理
true = OP分の時差なしの処理

fuga.vue

オープニングアニメーション用のコンポーネントにて以下のように記述
アニメーションには、GSAPを使用しています。

export default {
  methods: {
    onStore() {
      this.$store.commit('increment')
      console.log(this.$store.state.flag)
    },
    opening() {
      const animeTl = this.$gsap.timeline({ onComplete: this.onStore() })
　　　　　　animeTl.to('.hoge',{ opacity:0 ,duration:2})
  　},
  },
  mounted() {
      this.opening()
  },
}

onCompleteにて、onStore関数を呼び出してstore内のflagをfalse → trueに変更します。

Kv.vue

管理したいアニメーション箇所のmounted内でstoreの値で分岐する処理を追加します。
今回は、遅延処理をsetTimeoutにて行っています。

export default { 
 methods: {
    KvAnimation() {
      //kvアニメーション処理
      }
    },
  mounted() {
    //storeの値で分岐
    if (this.$store.state.flag === true) {
      this.KvAnimation()
    } else {
      setTimeout(() => {
        this.KvAnimation()
      }, 2100)
    }
  }
  },

以上、状態管理を用いたOP後の発火タイミング処理についてでした！
最後までご閲覧いただきありがとうございました。