Why I Removed an Animated Hover Indicator
It looked connected
My bookmarks page is a long list of things I want to come back to. I gave it one animated hover indicator that travelled between rows. At first, I liked it. The list felt like one connected surface instead of separate links stacked together. It was especially nice when I moved between nearby rows. Then the list got longer.
The moment it felt late
I would move quickly through the list, but the indicator was still on its way from somewhere else. My pointer had already reached the next row. The feedback arrived after my attention had moved on. Nothing was broken. The right row still changed. It just felt slightly late, which is a strange feeling to introduce to a simple hover.
I considered making the spring faster. But the problem was not the spring. The indicator still had to travel across the list every time I skipped a few rows.
The comparison
Move between the first and last rows, then switch the feedback model and try it again. The shared version keeps the travelling indicator. The local version responds where the pointer already is.
Hover between the first and last rows
The list stays the same. Only the feedback model changes.
- ERethinking MotionEmil KowalskiArticle
- LDesigning Fluid InterfacesLinearArticle
- JThe Details That MatterJosh ComeauArticle
- SPractical AccessibilitySara SoueidanGuide
- MBuilding for the WebMDNReference
- RInteraction Design NotesRauno FreibergArticle
- VAnimation at WorkVal HeadBook
The active surface travels to the next row. Larger jumps make the travel more visible.
I kept the feedback
I did not want to remove hover feedback. I just did not need it to travel. I replaced the shared indicator with a local background transition on each row. The background still changes, and the arrow still shifts a little. The part I removed was the journey between rows.
It is quieter now. Moving one row or ten gives me the same immediate response. The original version still looks nice. It just stopped matching the way I used the page.
What I kept
I still use shared layout animation when the movement adds something. A tab indicator is a good example. Seeing it move can connect the active state to the option I just chose.
Here, I already knew which row I was hovering. I did not need an indicator to cross the list to tell me.
I did not remove the animation. I removed the part that was asking for attention without helping me.