Angular 8/9 | Custom Animation Tutorial by Example

Using Angular’s Animation package we can implement custom animation in our project which adds up a lot of value to the application by improving the way it behaves in front of users.

We will go from basic to advance level with examples. So let’s begin…

Enable Animations

The two main modules which are required for animations are @angular/animations and @angular/platform-browser which are installed by default if the project is created using NgCLI tool.

So here we just need to import the BrowserAnimationsModule in our app.module.ts file:

That’s it we are ready to use animations in our component.

Adding Animations

Animations in a component are enabled by adding the animations array in @Component metadata.

The animations array, in turn, will have triggers.


The triggers method takes a name and metadata as an array of states. There can be an array of triggers under animations property


The state is simply a way to putting style with some style for example here we have two states

In the App Component update animations property and also add switchState() method


With state, we can use transition method to animate with a smooth transition from one state to other


To define the state of animation during the transition at each point of time we use keyframes.

The keyframes method is available in the animate method’s metadata

Above every keyframe is equally divided but we can control it using the offset property which starts from 0 to 1 to cover the animation time which is 500 ms.

Animation Callbacks

Yes! Callbacks are also available which get triggered after completion of an animation

There two callback events available start and done which are used with the same selector


Leave a Reply

Notify of