Custom Cursor Interaction Video Issue
Hey @Web Bae, thank you for the great video on custom cursor setup!
Video linkhttps://www.youtube.com/watch?v=lRKdb5yDh-k&t=96s
I've followed the instructions for my project here:
Share link https://preview.webflow.com/preview/new-site-04b47e?utm_medium=preview_link&utm_source=designer&utm_content=new-site-04b47e&preview=23b81fc211d835dd53332979ae1be0f7&workflow=preview
Staging link https://new-site-04b47e.webflow.io/
It all works well for the links in my nav bar. However, it's not working for other links on the site. For example, the 'listen' & 'watch' buttons in the bottom right. I thought it could be because of the background video, and I attempted to follow your instructions to @edgarfayad9421, who seemed to have a similar issue in the YouTube comments. Unfortunately, I still can't get it working on my project. Any guidance on how I might fix this would be much appreciated! Thank you.
Web Bae
YouTube
Custom Cursors with Hover in 8 Min!
Here's how I implement custom cursors in Webflow - a little custom CSS here goes a long way in making the cursor feel more integrated and smooth out your workflow on larger sites.
// CLONE IT (affiliate link)
👉 https://webflow.grsm.io/cloneable-is-bae?sub1=wf-cursors
// FREE STUFF
💪 My ULTIMATE Webflow Resource Library: https://code-snippets...
8 Replies
Hey @myla9698 I'm pretty sure that your setup is okay, it's just that the bottom buttons need a higher z-index. The cursor wrapper has a z-index of 1000, and your navlinks are working because your navbar has a z-index of 9999, so try changing the links in the bottom right and left to have a higher z-index above 1000 so that you can actually click them above the cursor wrapper
Hey @AtomicZBRA, thanks for taking a look and your message! I've tested setting the 'listen' & 'watch' buttons to reflect the nav z-index of 9999; however, the interaction still isn't working, the cursor just sits behind the buttons. I'm not very experienced with webflow, so I may have missed what you mean. How's it looking to you? Thanks again!
So thank actually is making progress! The links are now clickable, if you try adding the animation to those buttons as well you should see the cursor animation again. The reason you're not seeing the actual cursor though is because the of the background and background colour on the button, even on your nav links, they're sitting above the cursor. It's visible up there though because it's just text and you have it set to like difference blending mode i think so they're kinda transparent
What you could also do, shold solve that issue: on the element with the class "cursors-wrapper" set the z-index to be the highest, and then set pointer-events to none. That way it'll always show up over top of the elements, but it won't obstruct elements below it like it was doing initially
Ah awesome! Interaction working 😃 I'd like to get the cursor to show above as you mentioned. Where can I set pointer events to none? I thought that was the embed within the cursor wrapper but it seems like it's not that.
It's a new feature in webflow actually! right at the bottom of the style panel, set it to events -> none
@AtomicZBRA Ah great! Thank you so much for your help! It's all working perfectly now 😊
No problem 🥳
@AtomicZBRA you rock! Thank you!