Why Angular animations matter

Introduction

Angular animations make apps feel smooth and alive. They help users understand changes on the screen by showing movement instead of sudden jumps.

When showing or hiding parts of the page, like menus or dialogs.

When switching between different views or pages.

When highlighting changes, like new messages or updated content.

When making buttons or controls respond visually to clicks or taps.

When guiding users through a process step-by-step.

Syntax

Angular

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

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  animations: [
    trigger('openClose', [
      state('open', style({ height: '200px', opacity: 1 })),
      state('closed', style({ height: '100px', opacity: 0.5 })),
      transition('open <=> closed', [animate('0.5s ease-in-out')])
    ])
  ]
})
export class ExampleComponent {}

The trigger defines the animation name used in the template.

state sets styles for different states, and transition defines how to animate between them.

Examples

This animation fades an element in when it appears and fades it out when it disappears.

Angular

trigger('fadeInOut', [
  state('in', style({ opacity: 1 })),
  transition(':enter', [style({ opacity: 0 }), animate('300ms ease-in')]),
  transition(':leave', [animate('300ms ease-out', style({ opacity: 0 }))])
])

This animation slides content open or closed by changing height and opacity.

Angular

trigger('slideToggle', [
  state('open', style({ height: '*', opacity: 1 })),
  state('closed', style({ height: '0px', opacity: 0 })),
  transition('open <=> closed', animate('400ms ease'))
])

Sample Program

This component shows a button that toggles a box open and closed. The box smoothly changes height and fades in or out. It uses Angular animations to make the change clear and pleasant.

Angular

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

@Component({
  selector: 'app-toggle-box',
  template: `
    <button (click)="isOpen = !isOpen" aria-pressed="{{isOpen}}">
      Toggle Box
    </button>
    <div [@openClose]="isOpen ? 'open' : 'closed'" class="box" role="region" aria-live="polite">
      This box opens and closes with animation.
    </div>
  `,
  styles: [
    `.box { background-color: #90cdf4; margin-top: 1rem; overflow: hidden; padding: 1rem; border-radius: 0.5rem; }`
  ],
  animations: [
    trigger('openClose', [
      state('open', style({ height: '*', opacity: 1, padding: '1rem' })),
      state('closed', style({ height: '0px', opacity: 0, padding: '0 1rem' })),
      transition('open <=> closed', animate('500ms ease-in-out'))
    ])
  ]
})
export class ToggleBoxComponent {
  isOpen = false;
}

Important Notes

Animations improve user experience by making changes easier to follow.

Always consider accessibility: use ARIA roles and live regions to inform screen readers.

Test animations on different devices to ensure smooth performance.

Summary

Angular animations help make apps feel smooth and interactive.

They show changes visually, so users understand what is happening.

Use them for showing/hiding content, transitions, and feedback.