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) →

🤩 I really like this JS/CSS Custom Properties combo, it’s so powerful … that’s one of the reasons why I and others are really excited about CSS Custom Properties

💡 You could keep this pure CSS, but that would mean injecting lots of extra elements to detect the direction.

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.