Blob like hover animation
The vercel dashboard (https://vercel.com/dashboard) has this nice hover animation on the navbar.
How would I go about recreating that effect, keeping it accessible too?
(Nextjs, so it's stuff is all garbled up and bundled)
7 Replies
if im correct your talking about the highlight moving to the hovered item?
in that case, you'll need multiple event listeners.
- pointerenter to show the highlight
- pointerleave to hide the highlight
- pointermove to follow the hovered item
when an item is hover, you'll need to calculate the size and position of that item (within the menu), then you can translate the hightlight to that size and position in css
i created a little demo with an example of how you can achieve something like that
https://codepen.io/MarkBoots/pen/zYLPrjW?editors=1111
If I may ask, what properties are being effected in the transition?
top, left, width, height, and opacity
top would only change if the menu wraps in multiple lines
gotcha! Thanks!
Should I be concerned about disabling this on any device for being too performance hogging or something?
its not really heavy or something, you're choise
oh and sorry for the ping 😅 I swear, I turned it off
thanks for that, so so, so much! And have a nice day!
you're welcome. good luck!
btw, if you want to keep the example pen, then copy or fork it. I will remove it in a couple of days