search

stephenscaff / react-animated-cursor

An animated custom cursor React component.
ISC License
309 stars 30 forks source link

Cursor is not hiding on mobile on static rendered pages #63

Open franklington opened 11 months ago

franklington commented 11 months ago

Can't figure out why the cursor is still visible on and interacting on my iPhone safari. FYI: The whole site is exported static.

My packages:

"dependencies": { "@mdx-js/loader": "^2.3.0", "@mdx-js/react": "^2.3.0", "@motionone/utils": "^10.15.1", "@next/bundle-analyzer": "^13.3.0", "chota": "^0.9.2", "cookies-next": "^4.0.0", "framer-motion": "^10.12.3", "keen-slider": "^6.8.6", "marked-react": "^1.3.2", "next": "^13.3.0", "next-image-export-optimizer": "^1.8.3", "next-themes": "^0.2.1", "react": "^18.2.0", "react-animated-cursor": "^2.7.0", "react-dom": "^18.2.0", "react-markdown": "^8.0.7", "react-player": "^2.12.0", "use-sound": "^4.0.1" }, "devDependencies": { "eslint": "7.32.0", "eslint-config-next": "^13.3.0", "gray-matter": "^4.0.3", "marked": "^4.0.14", "next-seo": "^5.4.0", "next-sitemap": "^4.1.8", "sass": "^1.62.0" }

stephenscaff commented 10 months ago

About to publish an update that might address this.

KevinNizet commented 7 months ago

Hello @stephenscaff @franklington, Does the update is released ? Do you have another way to disable the cursor on mobile devices ? Thanks :)

guifra90 commented 6 months ago

Hi, yes I also confirm that the component works fine, but on mobile devices the cursor remains active when you tap on the screen. While waiting for the fix, do you have a work around in mind? Thanks for the support!

KevinNizet commented 6 months ago

Hi @guifra90, @stephenscaff, no I tried several options with custom react hooks but not really satisfying in the end and a bit overkilled... So yes, it remains active for now on mobile devices when you tap on screen.

AbogeJr commented 6 months ago

Hey @guifra90 et al. I may have found a temporary workaround (though it's really hacky). I cloned the repo and copied the lib directory from the react-animated-cursor into my project then, since I'm using Tailwind for styling, i manually added the classes on the div returned by CursorCore (which is the custom cursor element) to hide the cursor on small screens; "hidden md:block". Then i just imported AnimatedCursor as a client component and it no longer shows on mobile. Hope this helps 👍🏾.

You can check it out Here

image