One highlight that glides
Hover a menu and most highlights blink from item to item. One that slides shows you where you came from and where you are.
In 20 seconds
Why blinking hover states make your eye work harder.
How one sliding highlight keeps your place in a list.
How to build it with one element and a transform.
The blink
Run your cursor down a menu in most apps and each row lights up on its own: off, on, off, on. It works. But every time a highlight blinks out in one place and pops up in another, your eye has to jump and find it again.
It's a small thing. You do it hundreds of times a day, though, and small things add up to "this app feels a bit tiring" without anyone being able to say why.
See the difference
Move your cursor up and down the list, fast and then slow. Then flip to the other version and do the same.
Bad: Each row lights up on its own, so the highlight teleports.
Bad: Your eye re-finds the cursor on every move.
Bad: Fast movement looks like flicker.
Good: One highlight slides to wherever you point.
Good: You always see where you came from and where you are.
Good: Fast movement looks smooth, not flashy.
Why sliding feels like one thing
Your brain loves to connect things. Show it a light here and then a light there, quickly, and it sees one light moving. That effect was described back in 1912, and it's why film works at all.
Interface researchers took the same idea further. Animation that shows an object moving from its old spot to its new one helps people keep track of it, instead of making them re-find it. Studies on animated charts found the same thing: smooth transitions help people follow what changed.
A highlight that slides is one object moving. A highlight that blinks is two objects flashing. Your brain prefers the first.
Motion that connects two moments feels like one thing moving, not two things flashing.
How to build it
One element behind the items, positioned absolutely inside the group. It's the highlight.
On hover, read the item's position and size and move the highlight there with a transform, not top and left.
Transition about 220ms with a fast-start curve. No bounce. It should arrive, not wobble.
Fade it out when the pointer leaves, and follow keyboard focus too, so it works without a mouse.
Mistakes I see a lot
Springy overshoot. The highlight flies past the item and swings back. It looks playful once and annoying forever.
Animating top and left. That makes the browser redo layout every frame. Transforms are nearly free.
A highlight shape that doesn't match the items. A pill behind square rows looks broken.
Too slow. If it lags behind the cursor, it feels like the app is behind you.
Sources
[1] Experimentelle Studien über das Sehen von Bewegung (Experimental studies on the seeing of motion). Max Wertheimer. Zeitschrift für Psychologie, 1912.
[2] Animation: From Cartoons to the User Interface. Bay-Wei Chang and David Ungar. ACM UIST, 1993.
[3] Animated Transitions in Statistical Data Graphics. Jeffrey Heer and George Robertson. IEEE Transactions on Visualization and Computer Graphics, 2007.
| GreedUI | ||
|---|---|---|
| I can explain why blinking highlights cost attention. | I know why a sliding highlight feels like one object. | I'd build it with one element and a transform, not by animating each item. |
| Each row lights up on its own, so the highlight teleports. | Your eye re-finds the cursor on every move. | Fast movement looks like flicker. |
| One highlight slides to wherever you point. | You always see where you came from and where you are. | Fast movement looks smooth, not flashy. |
| Change its top and left values | Move it with a CSS transform | Re-render every item with its own background |
Full component index: llms.txt