Bringing Router Animations to Angular 17 Navigation

I'm always looking for ways to make websites feel more interactive and polished. While putting together a store demo recently, I wanted to add a bit of flair to the experience of moving between product pages. That curiosity led me to explore a gem in Angular 17: the View Transitions API.

Understanding Page Transitions

Page transitions are the visual effects that play out when a visitor jumps from one page to another. They can make navigation feel fluid and more engaging. If you're new to web animation, this primer on CSS animations is a solid starting point.

Setting Up Page Transitions in Angular

Angular 17 introduces a handy utility called withViewTransitions to enable this feature. Let's walk through activating it in your project.

Enabling withViewTransitions in the Router

The first step is flipping on the page transition feature. Navigate to your app.config.ts file and adjust the provideRouter setup accordingly:

import { ApplicationConfig } from '@angular/core';
import { provideRouter, withViewTransitions } from '@angular/router';
import { routes } from './app.routes';
import { provideHttpClient, withFetch } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes, withViewTransitions()),
    provideHttpClient(withFetch()),
  ],
};
Enter fullscreen mode Exit fullscreen mode

That single change turns on the page transition behavior. For a deeper look at routing in Angular, the official router documentation is a great resource.

Defining the Transition Styles

The real magic happens with two specific CSS selectors: ::view-transition-old(root) and ::view-transition-new(root).

  • ::view-transition-old: Targets the snapshot of the current page as the navigation begins.

  • ::view-transition-new: Targets the incoming page that is about to be rendered.

If CSS animations are unfamiliar territory, this tutorial on CSS animations can help you get up to speed.

Building Simple Animations

Creating animations might sound complex, but it’s surprisingly straightforward with the right tools. I relied on a CSS keyframe animation generator to craft basic enter and exit effects.

@keyframes enter {
  0% {
    opacity: 0;
    transform: translateY(-50px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes exit {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(0.6);
  }
}
Enter fullscreen mode Exit fullscreen mode

Next, tie these animations to their respective selectors:

::view-transition-old(root) {
  animation: exit 2s ease 0s 1 normal forwards;
}

::view-transition-new(root) {
  animation: enter 3s ease 0s 1 normal forwards;
}
Enter fullscreen mode Exit fullscreen mode

Once you save these changes, your site will feature fluid, aesthetically pleasing transitions whenever users navigate between pages!

Add Router Animation Transitions for Navigation in Angular 17 — figure 1

Wrapping Up

Angular 17 simplifies the process of adding page transitions, which is a fantastic way to boost engagement. With these steps, you can introduce eye-catching animations that make your website more interactive and enjoyable for users.

For more in-depth material, check out Angular’s animation guide and this detailed page transition tutorial.