Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Kelimino

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

Go to solution Solved by Rodrigo,

Recommended Posts

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

 

 

Link to comment
Share on other sites

  • Solution

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!!!

  • Like 2
Link to comment
Share on other sites

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();

Link to comment
Share on other sites

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!!!

  • Like 1
Link to comment
Share on other sites

Thanks again  ;) 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×