Jump to content
GreenSock

Nicolaseliell

Custom cursor stops working after Gsap Nuxt page transition

Recommended Posts

I'm building a nuxt site with a gsap custom cursor and gsap page transitions. My problem is that the custom cursor won't work after page has transitioned but without the page transition the cursor works perfectly.

 

So what I'm trying now is to call the cursor init method after enter() function in nuxt.config.js. I tried to setTimeout for 500ms, it seems to work after 500ms but not sometimes + the user experience gets bad because the cursor lags for a half second and then starts working. My second approach was to toggle a boolean in nuxt store and and then run the init function inside the customCursor.vue component but it seems it is not possible to get access to vuex store from nuxt.config.js file. So now I'm a bit stuck and can't figure out how to init this cursor after the enter() has run (or is that even the problem)

I'll appreciate any help a lot, thank you in advance! (sorry for my english)

 

Here's the sandbox of the problem: https://codesandbox.io/s/lucid-cookies-yvr2z?file=/nuxt.config.js

Link to comment
Share on other sites

Hi there!

 

Could you pop this in a codesandbox for us? It's quite hard to parse and try to imagine the output of a big block of code like this.

Link to comment
Share on other sites

11 minutes ago, Cassie said:

Hi there!

 

Could you pop this in a codesandbox for us? It's quite hard to parse and try to imagine the output of a big block of code like this.

Hello, I added a sandbox of the problem to the question now!

  • Like 1
Link to comment
Share on other sites

4 hours ago, Nicolaseliell said:

Hello, I added a sandbox of the problem to the question now!

 

I don't see any cursor. And I don't think you should be destroying it on a route change. Just let it run.

 

Link to comment
Share on other sites

18 hours ago, OSUblake said:

 

I don't see any cursor. And I don't think you should be destroying it on a route change. Just let it run.

 

Hi, you have to refresh few time for it to work + you have to be in the full screen mode in sandbox!

Link to comment
Share on other sites

18 hours ago, Cassie said:

I think you just had opacity:0 on the cursor ball?

Unless I'm not understanding? Apologies if I'm missing something.

https://codesandbox.io/s/staging-bash-fbp7k?file=/components/CustomCursor.vue

Yes, but that's not the problem. You have to be in the full screen mode in sandbox to see the cursor + refresh few times to see the bigger cursor appear if it did't already. The problem is that if you navigate to Example and then back to Home page the cursor won't scale anymore when hovering on the button for some reason BUT if I take the page transition off from nuxt.config.js then the cursor works just how it should.

Link to comment
Share on other sites

Just sounds like you need to fix some logic problems with your app. You can see the console statements are in the incorrect order, and this is logging out the previous length.

 

console.log(this.withHover.length);

 

But again, that's just some logic you'll need to figure out as it's really not a GSAP issue. You need add your hover listeners after the page has fully been transitioned.

 

On 1/4/2022 at 5:23 AM, Nicolaseliell said:

it seems it is not possible to get access to vuex store from nuxt.config.js file.

 

You can use the JavaScript hooks inside your pages, which should give you access to the store. 

export default {
  transition: {
    enter() {
      ...
    }
  }
}

 

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.
×