Animated bg color navigation menu on hover

Design help Animations & Interactions
1

Check out Whirlpool’s navbar.

image
image1062×229 14 KB

The yellow background color of the menu item animates over to the next item when you hover over it.
Any ideas on how to do this?
One thought that came to mind is using grid with a separate div for the color, but animate its manual position when you hover over it. no luck though. I’ll continue to play around and post a public link soon. Just thought I’d share as a design challenge.

Update
I’ve managed to recreate this with an extra blank menu item which I animated. But it’s completely not responsive. Here’s the link
https://jeremys-stunning-site-f05bbc.webflow.io/
I animated:
size: to fit the size of the navigation items
move: roughly had to eyeball how far to position them. thought there’s got to be a better way to grab those values because it’s not responsive
opacity: fade in/out on hover

2

If only there was a way to animate the position of the elements column/row on hover. This would be handy

image
image475×741 44.4 KB

3

hi @jryler133 why you just do not use BG color to be changed on:hover. It is the simplest way to achieve this effect.

2 Likes
4

Yeah true, mean it’s similar, though they had this really neat slider effect on that particular element they are using for the bg. I love how the Whirlpool site makes it just glide across.

5

HI @jryler133 I have now checked in Chrome and I see what you mean as in Safari it doesn’t work and has fallback. When you check their website with DevTools you can reverse engineering how they have it done and here is simple example of one way how it can be done.

good luck

1 Like
6

Thanks Stan, this is super helpful! thanks for taking the time to provide this!