Easy Menu Animation Effects with Angular Animations
Tags: angular, webdev, typescript
Published: 2021-03-01 21:07:22


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.

<hr/>

## 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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0obv1wq87x4j2ab8m5g0.gif)


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

<p>Here you can see the code for this animation:</p>
{% gist https://gist.github.com/NicholaAlkhouri/d4a2f5232deaa895fc4522811deeb170.js %}

* 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](https://angular.io/guide/transition-and-triggers#enter-and-leave-aliases).
* 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](https://angular.io/guide/complex-animation-sequences#sequential-vs-parallel-animations).
* 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.

<hr/>

## 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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lxp282t4kvx9iqxf84h3.gif)

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

And the code bellow:

{% gist https://gist.github.com/NicholaAlkhouri/0c1ef1b160f77b0587edf75429698986.js %}

* 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](https://angular.io/guide/reusable-animations)), 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.

<hr/>

### Resources
* Angular Animations Official Documentation: [https://angular.io/guide/animations](https://angular.io/guide/animations)
* Reusable Animations:[https://angular.io/guide/reusable-animations](https://angular.io/guide/reusable-animations)
* In-Depth guide into animations in Angular by [William Tjondrosuharto](https://indepth.dev/authors/1070/william): [https://indepth.dev/posts/1285/in-depth-guide-into-animations-in-angular](https://indepth.dev/posts/1285/in-depth-guide-into-animations-in-angular)