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.

Triggers

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

States

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

Transitions

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

Keyframes

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

avatar
  Subscribe  
Notify of