Angular Animations — Trigger, State, Transition

Animations

Animation is the transition from one state of an element to another state. Animations are an integral part of any modern web application, helping create a great UI experience. Angular allows us to create animations that provide similar native performance as CSS animations. In Angular 21 with standalone components, animations are enabled using provideAnimationsAsync() in app.config.ts. Angular defines three different states for an element:-

Void State

The wildcard State

Custom State

Creating Animations

Angular animations can be created easily by following the below steps-

Step 1:- In Angular 21 with standalone components, include provideAnimationsAsync() in the providers array of app.config.ts. This lazy-loads the animations engine for better initial load performance. For legacy NgModule-based apps, import BrowserAnimationsModule in app.module.ts.

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideAnimationsAsync()   // lazy-loads the animations engine
  ]
};

Animations in Angular 21

In Angular 21 with standalone components, animations are enabled by including provideAnimationsAsync() in app.config.ts instead of importing BrowserAnimationsModule. The async variant improves initial load performance by lazy-loading the animations engine.

Animation States

Angular animations are built around state transitions. The three core states are:

• void - The element is not part of the DOM (entering or leaving).
• * (wildcard) - Matches any state, used for catch-all transitions.
• Custom states - Named states you define, e.g. 'open', 'closed'.

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

@Component({
  selector: 'app-toggle',
  standalone: true,
  animations: [
    trigger('openClose', [
      state('open',   style({ height: '200px', opacity: 1, backgroundColor: '#4caf50' })),
      state('closed', style({ height: '50px',  opacity: 0.5, backgroundColor: '#ccc' })),
      transition('open <=> closed', [animate('0.4s ease-in-out')])
    ])
  ],
  template: `
    <div [@openClose]="isOpen() ? 'open' : 'closed'" style="overflow:hidden; padding:10px">
      <p>The box is {{ isOpen() ? 'Open' : 'Closed' }}</p>
    </div>
    <button (click)="toggle()">Toggle</button>
  `
})
export class ToggleComponent {
  isOpen = signal(true);
  toggle() { this.isOpen.update(v => !v); }
}