How to Create or Add Custom Animations in Angular 16

How to create or add custom animations in Angular application? Fret not, angular animation will be covered in this tutorial.Thanks to the Web Angular animations API, Angular is fully equipped with its own DSL and powerful animation engine. This article is meant to be a detailed study of Angular 2+ animations.

We will need to come up with more posts to cover this topic more efficiently.

We have provided some simple Angular animations examples for your reference. Let’s divulge more details of Angular animations.

Injecting BroswerAnimationsModule in Angular App

On top of it, in your app module, you will have to import the module named BroswerAnimationsModule.

In order to remove strict type warnings or errors make sure to set “strict”: false and "strictTemplates": false under compilerOptions and angularCompilerOptions properties in tsconfig.json file.

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports:      [ BrowserAnimationsModule ],
  declarations: [ ... ],
  bootstrap:    [ ... ]
})

export class AppModule { }

Importing Angular Animation services in the Components

Animations have their own package since Angular 4. You don’t have to depend on @angular/core anymore. So here is how your import statement will turn out:

import { trigger, state, style, transition, animate, group } from '@angular/animations';

Understand Angular Animations API

Method	Working Details
trigger():	It triggers the animation, combines all the other animation functions within. triggerName is used with HTML template and declared as a first argument, and the second argument goes with array syntax.
style():	Useful function for using multiple CSS style in animations. Uses an object syntax, Manages the appearance of HTML elements during animation.
state():	Builds various style set for animations. The state name refers to the first argument. It can be aligned with the transition later on.
animate():	Animate function refers to the animation duration. Optional parameters are keyframes, delay, easing etc.
transition():	First argument animation states, use the array syntax. It applies the animation duration between two states.
keyframes():	Used withing animate() function, it allows subsequent change among styles within a specified duration. Can include multiple style() calls within each keyframe.
group():	Works in transition() method as a second argument, uses array syntax. It combines groups of animations. The animation moves further when all the inner animation steps have completed.
query():	This function finds HTML elements within the current element.
sequence():	Refers to the list of animation steps that run concurrently.
stagger():	Refers to the animations starting time for multiple elements.
animation():	It’s a reusable animation block that can be triggered anywhere in the app. Used together with useAnimation().
useAnimation():	Fuel up a reusable angular animation. Works with animation() method.
animateChild():	It permits the animations on child components runs along with the parent animation’s timeframe.

Defining Angular Animations

As for the animation declarations in Angular, we keep them in the component metadata, as shown in the example below:

import { Component } from '@angular/core';
import { trigger, state, style, transition, animate, group } from '@angular/animations';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('toggleBox', [
      // ...
      state('open', style({
        height: '200px',
        backgroundColor: '#061ff0'
      })),
      state('closed', style({
        height: '70px',
        backgroundColor: '#E91E63',
      })),
      transition('open => closed', [
        animate('.3s')
      ]),
      transition('closed => open', [
        animate('0.3s')
      ]),
    ])
  ]
})

export class AppComponent {
  isOpen;

  toggle() {
    this.isOpen = !this.isOpen;
    console.log(this.isOpen)
  }
}

Yes, the syntax looks little complicated. However, you will find it simple once you break this down into pieces. You will be surprised by the power and flexibility it offers.

We use the trigger to trigger the animation. Transitions have represented states of the animation. We specify a delay, animation duration, style for states etc. as well.

Moreover, in the case of complex scenarios, we can import the state from @angular/animations. Also, we shall be able to define specific and named animation states.

Defining Template for Angular 2+ Animations

<button (click)="toggle()">{{isOpen ? 'Close Me' : 'Open Me'}}</button>

<div [@toggleBox]="isOpen ? 'open' : 'closed'" class="custom-style">
  <p>The box is now {{ isOpen ? 'Open' : 'Closed' }}!</p>
</div>

We are going to take a look at the template below. We are referring to regular template code here. The only difference is that we have included toggleBox trigger placed in brackets. Also, we added the @ sign right before that. Let’s take a look below: