Default cursor flickering on page trasition

Hi All,

I’ve made a custom cursor and hidden the default one.
On my page transition the default cursor appears/flicker for a second upon loading the new page.

Like this:
Untitled

How can I prevent that?
I hope you can help me solve this cursor flickering problem. :blush:

// Line


Since the custom cursor wouldn’t appear on the Read-Only Link, I’m sharing this published one:
https://lines-spectacular-site.webflow.io/

Hello @o0olineo0o, welcome to the community! So I think what is going on here is that the black div you are using for the transition has the cursor set to auto, just set it to none and it should work as intended. I hope this helps!

Hi Pablo,

Thank you, and thanks for your response!
I’ve checked, and all the elements for the transition have the cursor set to “none.”
All elements on the page should have it set to none, so I’m not sure what else it could be.
Do you have any other suggestions? :blush:

did you check the if the body tag has the cursor set to none on the destination page?

Yes, it should all be good. Others have suggested making the cursor opacity 0, but it doesn’t seem to work either. This has been bothering me for 5 days now, I’m getting crazy :see_no_evil:

That is strange, for what I can see on your site while inspecting, I don’t see a cursor none applied to the cursor dot class or to the cursor wrapper class, maybe that could be the issue?

They should inherit the cursor:none from the body, but I just applied it to those now, and it’s still the same - unfortunately!

Yes, but my thinking is that the code handling the transition is loading before the styles are applied, so that is why it is flickering. Try this, make a webflow animation on load where your cursor wrapper is set to display none initially and then it goes to whatever display you have, but after the transition has happened. Does that make sense?

Yes, that makes sense. I tried it now and added a bit of delay to make sure it’s not the custom cursor - and it doesn’t seem to be. Thanks for the suggestion, though. :blush:

Oh I see it is the transition code then, maybe this tutorial will put you on the right track https://www.youtube.com/watch?v=XuYO4hY0HhU I hope this helps!

That is actually the exact tutorial I followed for the page transition. Maybe I should redo it all over again and see if it helps. Thank you :hugs:

Actually I just tried it, with the cloneable from the tutorial, and it does show a flicker even when a cursor is set to none. I’m sorry, my last suggestion should be to maybe use a library like Barba Js for the transition. Good luck!

I’ll try another transition! Thanks for the help Pablo :pray:

1 Like