How to animate route transitions in Angular
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Animating route transitions in Angular enhances user experience by creating smooth visual feedback when navigating between pages. As the creator of CoreUI with extensive Angular experience since 2014, I’ve implemented route animations in countless enterprise applications for professional navigation experiences. The most effective approach uses Angular’s Animation API with router-outlet to define custom transition animations between route changes. This method provides smooth, customizable transitions while maintaining Angular’s reactive routing architecture.
Use Angular’s Animation API with router outlet to create smooth transitions between route changes.
import { trigger, transition, style, query, animateChild, animate, group } from '@angular/animations'
@Component({
selector: 'app-root',
template: `
<div [@routeAnimations]="getRouteAnimationData()">
<router-outlet></router-outlet>
</div>
`,
animations: [
trigger('routeAnimations', [
transition('* <=> *', [
style({ position: 'relative' }),
query(':enter, :leave', [
style({
position: 'absolute',
top: 0,
left: 0,
width: '100%'
})
], { optional: true }),
query(':enter', [
style({ left: '100%' })
], { optional: true }),
query(':leave', animateChild(), { optional: true }),
group([
query(':leave', [
animate('300ms ease-out', style({ left: '-100%' }))
], { optional: true }),
query(':enter', [
animate('300ms ease-out', style({ left: '0%' }))
], { optional: true })
]),
query(':enter', animateChild(), { optional: true })
])
])
]
})
export class AppComponent {
getRouteAnimationData() {
return this.router.url
}
}
This code defines a route transition animation using Angular’s trigger system that slides components horizontally during navigation. The animation queries entering and leaving components, positions them absolutely, and animates their movement with a sliding effect. The group function ensures both animations run simultaneously, while animateChild handles nested animations, creating smooth transitions between any route changes.
Best Practice Note:
This is the route animation pattern we use in CoreUI Pro dashboard applications for enterprise-grade navigation experiences. Consider adding route data for specific transition types and optimizing performance by limiting animations to essential routes only.
