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.
The animated borders aren't actually
border property. It's made out of
::after (::before) pseudo-elements "attached" to every navigation element, which are in short
display: block with
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!
Btw. you can inspect the page and see the implementation yourself. Press F12 and explore.