Route transition animations in Angular

Introduction

Route transition animations make moving between pages smooth and clear. They help users see changes on the screen in a friendly way.

When you want to show a fade effect between pages in your app.

When switching between different views and want a slide animation.

To highlight the change of content so users don’t get confused.

When building a multi-page app and want it to feel polished.

To improve user experience by adding visual feedback during navigation.

Syntax

Angular

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  animations: [
    trigger('routeAnimations', [
      transition('Page1 <=> Page2', [
        style({ opacity: 0 }),
        animate('300ms ease-in', style({ opacity: 1 }))
      ])
    ])
  ]
})

The trigger defines the animation name.

transition sets when the animation runs, like between two routes.

Examples

This example fades any route change in and out.

Angular

trigger('fadeAnimation', [
  transition('* <=> *', [
    style({ opacity: 0 }),
    animate('500ms ease-in', style({ opacity: 1 }))
  ])
])

This slides the new page in from the right when moving from HomePage to AboutPage.

Angular

trigger('slideAnimation', [
  transition('HomePage => AboutPage', [
    style({ transform: 'translateX(100%)' }),
    animate('400ms ease-out', style({ transform: 'translateX(0%)' }))
  ])
])

Sample Program

This Angular component adds a fade animation whenever the route changes. The prepareRoute method gets the animation data from the route to trigger the animation.

Angular

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

@Component({
  selector: 'app-root',
  template: `
    <main [@routeAnimations]="prepareRoute(outlet)">
      <router-outlet #outlet="outlet"></router-outlet>
    </main>
  `,
  animations: [
    trigger('routeAnimations', [
      transition('* <=> *', [
        style({ opacity: 0 }),
        animate('300ms ease-in', style({ opacity: 1 }))
      ])
    ])
  ]
})
export class AppComponent {
  prepareRoute(outlet: RouterOutlet) {
    return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation'];
  }
}

Important Notes

Make sure to add BrowserAnimationsModule in your app module imports.

Define animation data in your route config to control animations per route.

Test animations in different browsers to ensure smoothness.

Summary

Route transition animations improve user experience by adding smooth visual changes.

Use Angular's animation triggers and transitions to define these effects.

Connect animations to routes using RouterOutlet and route data.