MichaelBans MichaelBans - 1 month ago 9
CSS Question

Web Design: Line effect with block reveal style animation on link click

I'm currently trying to figure out how a current trend can be coded, I've seen this effect used quite often as seen here when using the navigation www.bearideas.fr,

I've searched the web for some kind of explanation/tutorial as to how the lines and then ultimately the block reveal in each individual section but I can only find a plugin on typmanus which was a bit complicated for me to try and learn from and ultimately I couldn't get it working or understand.

I was wondering if anyone could point me in the direction of any tutorials they have come across involving this effect or possibly explain a little how it works.

Sorry if this is the incorrect place to ask as I understand my question is a little bit vague but any type of help would be appreciated.

Thanks in advance, Mike.

Answer Source

The animated borders aren't actually border property. It's made out of ::before and ::after (::before) pseudo-elements "attached" to every navigation element, which are in short display: block with width: 1px, height: 100% and with some background: #ccc. These pseudo-elements are scaled down using CSS transform using transform: scaleY(0). On :hover (:hover) it's scaled back to full size. Then it's animated using CSS transitions, precisely using .35s cubic-bezier(.77,0,.175,1) in this case.

It's actually not that hard, so don't let these articles scare you!

As for graying out navigation elements on hover, it may be some javascript logic.

Btw. you can inspect the page and see the implementation yourself. Press F12 and explore.