Web site Developer I Advertising I Social Media Advertising I Content material Creators I Branding Creators I Administration I System Resolution
Menu animations are one thing that may elevate a design to a different degree. There are limitless potentialities and so they present a possibility to do one thing distinctive. Generally it’s additionally attention-grabbing to pair them with different animations. Already some time again I noticed this very nice menu animation by Ruslan Siiz known as “365 Journal”:
It’s a very lovely design and animation so I attempted replicating it however with extra of a darkish theme. That darkish theme is impressed by one other design which I can’t recall (it’s in all probability from a yr in the past or so), particularly the massive letters.
That is the preliminary web page:
When clicking on one of many hyperlinks within the high menu, two issues occur. First, we’ve a background cowl animation which works with an “unreveal” impact. In this tutorial you may find out how this impact works and the right way to code it up. Second, we’ve the increasing menu animation within the foreground. That is the how the menu appears like when it’s expanded:
The entire animation appears as follows:
The rounded look of the menu is preserved by inserting the submenu in a means that it overlaps the highest menu. Utilizing a component that wraps the submenu with the background coloration and border radius, and that has the overflow set to “hidden”, permits us to cover the internal menu factor by setting its Y rework to -100%.