Kelimino Posted March 24, 2021 Share Posted March 24, 2021 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 More sharing options...
Solution Rodrigo Posted March 24, 2021 Solution Share Posted March 24, 2021 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!!! 2 Link to comment Share on other sites More sharing options...
Kelimino Posted March 24, 2021 Author Share Posted March 24, 2021 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 More sharing options...
Rodrigo Posted March 24, 2021 Share Posted March 24, 2021 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!!! 1 Link to comment Share on other sites More sharing options...
Kelimino Posted March 24, 2021 Author Share Posted March 24, 2021 Thanks again Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now