How to Animate Route Changes in Angular

Angular is well-known for its powerful animation capabilities, thanks to the built-in @angular/animations package. One common UI enhancement is animating route transitions to create a smoother, more engaging experience for users. In this post, we’ll walk through how to animate route changes in Angular.

Prerequisites

Make sure your Angular project includes the @angular/animations package. If not, you can install it via:

ng add @angular/animations

Then, import BrowserAnimationsModule in app.ts:

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

@Component({
  selector: 'app-root',
  imports: [BrowserAnimationsModule],
  templateUrl: './app.html',
  styleUrl: './app.css',
})
export class App {}

Step 1: Set Up Route Definitions

In app.routes.ts, each route should point to a component:

const routes: Routes = [
  { path: 'home', component: HomeComponent, data: { animation: 'HomePage' } },
  { path: 'about', component: AboutComponent, data: { animation: 'AboutPage' } }
];

The data.animation field is used to identify route transitions uniquely.

Step 2: Define the Animation

Create an animation in your main layout component or wherever the <router-outlet> is defined. Import the following animation functions:

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

Then, define the animation:

export const slideInAnimation = trigger('routeAnimations', [
  transition('HomePage <=> AboutPage', [
    style({ position: 'relative' }),
    query(':enter, :leave', [
      style({
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%'
      })
    ]),
    query(':enter', [
      style({ left: '100%' })
    ]),
    group([
      query(':leave', [
        animate('300ms ease-out', style({ left: '-100%' }))
      ]),
      query(':enter', [
        animate('300ms ease-out', style({ left: '0%' }))
      ])
    ])
  ])
]);

This example creates a simple horizontal slide animation between the HomePage and AboutPage.

Step 3: Add the Animation to Your Component

In your component with the <router-outlet>, apply the animation trigger and prepare to pass the route state:

@Component({
  selector: 'app-root',
  template: `
    <div [@routeAnimations]="prepareRoute(outlet)">
      <router-outlet #outlet="outlet"></router-outlet>
    </div>
  `,
  animations: [slideInAnimation]
})
export class AppComponent {
  prepareRoute(outlet: RouterOutlet) {
    return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation'];
  }
}

The prepareRoute function pulls the animation state from the route’s data object.

Optional: Add Default Fallback Transitions

To avoid having to define every possible route pair manually, you can use a wildcard transition:

transition('* <=> *', [
  // define your default animation here
])

This is especially useful in larger applications.

Final Thoughts

Animating route changes in Angular enhances the user experience by making transitions feel fluid and responsive. Using Angular’s powerful animation module in combination with route metadata gives you fine-grained control over how your application moves between views. For even more complex needs, you can combine this with animation libraries like GSAP, but Angular’s built-in capabilities often cover the majority of use cases with clean and maintainable code.

Happy coding!