Direction Aware Hover Effect

A thing I commonly see nowadays are animated lines underneath menus and links:

Show Pen

One issue with that though: when hovering over an item the animation does not start from the place where you hover, but from a fixed point (here: bottom-center).

Try hovering an item from one of its edges and you’ll see: the animation is disconnected from your point of entry. This can feel weird, especially for wide items.

Thanks to CSS Custom Properties (aka CSS Variables) and a little bit of JavaScript, the animation can be enhanced. Here’s a demo by Tobias Reich:

Show Pen

Also feels really smooth when moving your cursor horizontally over the items.

Direction Aware Hover Effect Demo (CodePen) →