Next

普段からアニメーション関係はGSAPに頼りきりな投稿主です

Nuxt,js(SPA)でscrolltriggerを使用した際にとある壁にぶち当たりました。

アクセスして1回目は正常に動作するのですが、
ページ移動をしてまた戻り同じページを閲覧するとアニメーションが完了している所とそうでない所で分かれている事に気が付きました。

その時の記述がこちら

  methods: {
    Animation() {
      gsap.to(".hogehoge", 1, {
        opacity: 1,
        scrollTrigger: {
          trigger: ".hogehoge",
          start: "center center",
        },
      });
    },
  },
  mounted() {
    gsap.registerPlugin(ScrollTrigger);
    this.Animation();
  },

特に変わった記述はなしで、(多分)一般的な書き方だと思います。

色々見ていたところ前のページのスクロール量を記憶したままページ遷移をしており、
飛んだ先のページでも前ページと同じ分スクロールしている事になっている

厳密には違うと思いますが、言葉で表すとこんな感じです。

過程を省きますが、結構時間をかけて調べた結果こちらの記述を発見しました。

this.$nextTick(() => {　　});

掲載されていたサイトでは、
（「mounted」のフックで実行すると、子コンポーネントを無視して実行してしまうので、
すべてのレンダリングを待つときは、$nextTickを利用する　）と書いてありました。

もしや、、？これでは、、

早速記述を追加してみました。

  methods: {
    Animation() {
      gsap.to(".hogehoge", 1, {
        opacity: 1,
        scrollTrigger: {
          trigger: ".hogehoge",
          start: "center center",
        },
      });
    },
  },
  mounted() {
    gsap.registerPlugin(ScrollTrigger);
    this.$nextTick(() => {
      this.Animation();
    });
  },

期待通りの動作になりました！

一応SPAとSSRでは問題なく動作していますが、SSGでは試していないので不明。

なんとか正常に動かす所までいけたのですがこれが正しい方法なのかは正直わかっていません。
もしもっと良い方法を知っている方がいれば、Twitterまでご連絡いただけると嬉しいです。