Easy Menu Animation Effects with Angular Animations

In this article, I will use angular animations to give life to the navigation menu. I will use two types of navigation menus, dropdown, and sidebar. For both, I will animate the menu and the menu items.

---

Dropdown Navigation Menu:

I will start with the simpler example, the dropdown menu. In this animation, I will not use reusable animation, for simplicity reasons. However, I will use reusable animation In the sidebar menu example.

For this example, I will give the menu element an expand/collapse effect, by animating its height from 0px to the full height when opening the menu, and from the full height to 0px when closing. I will also animate each element with a fading effect and a slight transform on the Y-axis. Additionally, I will add a small delay for each menu item animation.

You can find the final code of this animation in this blitz:
https://stackblitz.com/edit/drop-down-menu-animation

Here you can see the code for this animation:

• The animation consist of two transitions :enter and :leave, these two aliases are used to target the menu element when it enters and leaves the view, you can find more about these two aliases in the official documentation.
• For :enter trigger, I first define the initial style of the menu { height: 0, overflow: "hidden" }. Then query each menu item and give it an initial style as well { opacity: 0, transform: "translateY(-50px)" }.
• Then I am using the sequence function to run two animations one after another, you can find more about the sequence function in the angular animations official documentation.
• The first animation in the sequence function is the expanding effect of the menu animate("200ms", style({ height: "*" })).
• The second animation in the sequence function is the effect of each menu item, for this animation first I am querying each menu item query(".menu-item", [. then I am using the stagger function to create a timing gap between each queried item, and animate each menu item by fading it in, with fixing its position on the Y-axis animate("400ms ease", style({ opacity: 1, transform: "none" })).
• For the :leave trigger, I am doing the exact same thing as the :enter trigger, but with a reversed order.

---

Sidebar Navigation Menu:

For this example, I will make things a little bit more complex but more flexible. I will make the animation reusable. In other words, I will provide some inputs that the consumer of the animation can pass to configure the animation.

You can find the final result of this animation in this blitz:
https://stackblitz.com/edit/side-menu-animation

And the code bellow:

• Very similar to the previous example, I use both :enter and :leave triggers, set the initial style of both the menu and the menu items, animate the menu then query and animate each menu item with a timing gap.
• One difference is the animation itself, in this example, I slide the menu container from the left side of the view, and then we do the same for each menu item with a slight delay.
• Also in this example, I used the function animation which allowed me to create a reusable animation (more about reusable animations here), and define some inputs which can be replaced during the runtime of the animation. When using the function animation to create reusable animation you have to use the function useAnimation to import the animation into your component.

---

Resources

• Angular Animations Official Documentation: https://angular.io/guide/animations
• Reusable Animations:https://angular.io/guide/reusable-animations
• In-Depth guide into animations in Angular by William Tjondrosuharto: https://indepth.dev/posts/1285/in-depth-guide-into-animations-in-angular