In Nuxt.js, need to refresh between pages, for Scrolltrigger to work

[Kelimino]

Hello Gsap,

First, you guys are amazing and love every topics of it.

 

Here is my issue:

 

In Nuxt.js, scrolltrigger works perfectly fine on first load but when navigating between pages, i need to refresh the browser everytime for scrolltrigger to work again. 

 

Gsap and scrolltrigger are properly registered and my animation is in a mounted () hook.

 

I believe it is something to do with Scrolltrigger.refresh or update() or kill() with the instances hook of Nuxt.js but cant figure out my head around this problem despite my research. 

 

Is there already a topic covering this issue ? Or you guys have a basic example, line of code on how to prevent this issue ? Someone had a similar situation ?

 

Thanks in advance and have a nice day  

Kellig

 

 

[Rodrigo]

Hi and welcome to the GreenSock forums.

 

This most likely has to do with the fact that your ScrollTrigger instances could be still alive when you switch from one page to the other. Just follow the regular hooks that Vue has for components life cycle. Keep in mind that a Nuxt page is a Vue component after all. Create all your ScrollTrigger and GSAP instances in the mounted hook and pause and kill all your instances in the beforeDestroy hook. Something like this:

 

export default {
  mounted() {
    this.tl = gsap.timeline({ /* Configuration Here */ });
  },
  beforeDestroy() {
    this.tl.pause().kill();
  },
  head() {
    return {
      title: "Home",
    };
  },
};

If you're still having issues, please try to create a reduced live editable sample in codesandbox using the Nuxt template, showing just the barebones of your app in order to identify what the problem could be.

 

Happy Tweening!!!

[Kelimino]

Hi and thanks a lot for this answer, it seems to work !

 

So, i believe that we have to add: " this.tl.progress(0).play()" at the beginning of the timeline in the mounted() hook, if we pause it ?

 

Thanks again Rodrigo for your time and response on this topic 

) .kill();

[Rodrigo]

2 minutes ago, Kelimino said:

So, i believe that we have to add: " this.tl.progress(0).play()" at the beginning of the timeline in the mounted() hook, if we pause it ?

That depends, keep in mind that any time you navigate to a page in Nuxt, Vue will trigger all the component's life cycle hooks, so you'll create the GSAP instances again, so there is no need to set their progress to 0 and play them, just use the same approach you've been using so far to create them and have them running. The reason for pausing the animations before killing them is just a personal preference, that's it.

 

Happy Tweening!!!

[Kelimino]

Thanks again