menu
A subtle change the menu above makes a lot of difference.
Here is a before and after:
It used to be straight and boring, now it is slanted and boring. But it animates differently! And has some perspective.
You'd think CSS transforms would be handy because you can easily create perspective with it, like I did in this box example at the bottom here. But its hard to control the exact height and angle, plus there would be z-position isseus with the text. I wanted finer control so I used :before and :after skewed and masked. So it looks 3D but really isn't.
This works fine, even with different sizes of text. It is not even that big of an issue to calculate when using custom CSS properties.
--degStep: 15deg;
&:nth-child(2):before { transform: skew(calc(-2 * var(--degStep))); }
&:nth-child(2):after { transform: skew(calc(-1 * var(--degStep))); }
&:nth-child(3):before { transform: skew(calc(-1 * var(--degStep))); }
&:nth-child(3):after { transform: skew(calc(0.25 * var(--degStep))); }
&:nth-child(4):before { transform: skew(calc(0.25 * var(--degStep))); }
&:nth-child(4):after { transform: skew(calc(1 * var(--degStep))); }
&:nth-child(5):before { transform: skew(calc(1 * var(--degStep))); }
&:nth-child(5):after { transform: skew(calc(2 * var(--degStep))); }
lorem ipsum dolir sit amet
For the animation I wanted a color swiping from right to left, or the other way around depending on the active menu-item.
A true 3D transform would look best of course. But the menu-items are small(ish), the background is obscured by text, and the animation duration is only a couple of milliseconds. So we can get away with the above.
For a hover state the animation can easily be done in pure CSS, because you can check :hover:not(.current):has(~a.current) as well as the negation. For the actual active animation some JavaScript is needed because as soon as the .current className is removed, so is the state of direction.
The logic seems simple enough but the order of actions is important. It is comparable to that of page transitions.
We first find the index of the .current menu-item (not removing the className just yet.