custom cursor effect
Someone posted this awhile ago asking about the custom cursor (I think it’s only visible on desktop) and I’m trying to figure out how these hover effects work. From what I can tell the button has its hover effect and on hover the custom cursor is transparent so it just looks like the cursor is becoming the hover state. Anyone else have any thoughts on this ? The timing seems a little tricky on when the cursor goes transparent and how it’s animated out and in.
It’s a site for accessibility so would be ironic if so but any issues with this kind of effect being inaccessible for those using assistive technology?
https://design.google/library/designing-global-accessibility-part-1
7 Replies
This implementation seems to be very Js heavy.
First of all, you need Js to track the mouse position for the custom cursor.
Secondly, on hover, the custom cursor doesn't just disappear, while the button hover state appears; it actually morphs from the custom cursor to the button hover state, which means it's the same element.
Thirdly, the morphing effect starts from the last position of the custom cursor right before the hover event.
"Fourthly"? 🙃 , I tested all the elements involved for any css effect based on the hover pseudo class, but none had any such implementation.
Hence, this implementation seems to be very Js heavy.Oh neat , thanks for investigating! Hmm the ‘thirdly’ part sounds trickiest
I find the way it locks the cursor is kinda jaring.. Specially going between the two top icons xD
Was trying to see if I could find an example but also might be a fun thing to make 😮 I know how I would do it without the "locking" but curious if it could be made to feel better.
To the note of accessibility the cursor wouldn't be there for assistive screen readers or used in navigation so its fine there.
How it becomes the hover state makes me wonder how they dealt with the focus state esp if someone is using a pointer device with other assistive technology's
Seems that is the focus state
I was gonna look when I got the laptop fired up, thank you