Route transition animations in Angular - Mini Project: Build & Apply

Route transition animations

📖 Scenario: You are building a simple Angular app with two pages. You want to add smooth animations when switching between these pages to improve user experience.

🎯 Goal: Create route transition animations that fade pages in and out when navigating between routes.

📋 What You'll Learn

Create a basic Angular app with two routes

Define a trigger for route animations

Apply fade in and fade out animations on route changes

Use Angular's animation module and router outlet with animation binding

💡 Why This Matters

🌍 Real World

Route transition animations improve user experience by making page changes smooth and visually appealing in web apps.

💼 Career

Understanding Angular route animations is useful for frontend developers building modern, polished single-page applications.

1

Set up routes and components

Create two components named HomeComponent and AboutComponent. Then, set up the Angular router with two routes: '' for HomeComponent and 'about' for AboutComponent. Import RouterModule and configure it with these routes in AppModule.

Angular

// Create HomeComponent and AboutComponent
// Set up routes array with path '' for HomeComponent and path 'about' for AboutComponent
// Import RouterModule and call RouterModule.forRoot(routes) in imports array of AppModule

Need a hint?

Define two simple components with templates. Then create a routes array with two route objects. Import RouterModule and call RouterModule.forRoot(routes) in the imports array of AppModule.

2

Add animation trigger and import BrowserAnimationsModule

Import BrowserAnimationsModule from @angular/platform-browser/animations and add it to the imports array in AppModule. Then, create an animation trigger named routeAnimations that defines a simple fade transition between any two states using Angular's trigger, transition, style, and animate functions.

Angular

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { trigger, transition, style, animate } from '@angular/animations';

// Add BrowserAnimationsModule to imports array
// Create a trigger named routeAnimations with fade in/out transitions

Need a hint?

Import BrowserAnimationsModule and add it to imports. Then define routeAnimations using trigger with a transition that fades opacity from 0 to 1 over 300ms.

3

Bind animation trigger to router outlet

In the main app component template, add a <router-outlet> element. Bind the @routeAnimations trigger to the router outlet by adding [@routeAnimations]="prepareRoute(outlet)" and a template reference variable #outlet="outlet". Then, in the app component class, add a method prepareRoute that returns the activatedRouteData['animation'] from the router outlet.

Angular

@Component({
  selector: 'app-root',
  template: `
    
  `,
  animations: [routeAnimations]
})
export class AppComponent {
  prepareRoute(outlet: any) {
    // Your code here
  }
}

Need a hint?

Bind @routeAnimations to router-outlet with a template variable #outlet="outlet". Add prepareRoute method to return the animation data from the outlet's activated route. Add data: { animation: 'HomePage' } and data: { animation: 'AboutPage' } to routes.

4

Complete app component and bootstrap

Ensure the AppComponent is declared and bootstrapped in AppModule. The app component template should contain the router outlet with the animation binding. This completes the setup for route transition animations.

Angular

// Ensure AppComponent is declared and bootstrapped in AppModule
// The template contains router-outlet with animation binding

Need a hint?

Make sure AppComponent is declared and bootstrapped in AppModule. The app component template should have the router outlet with the animation binding.