How to use Angular animations
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Angular animations provide powerful tools for creating smooth transitions and engaging user interfaces using the built-in animations API.
As the creator of CoreUI with extensive Angular development experience since 2014, I’ve implemented animations in numerous dashboard applications to enhance user experience.
The most effective approach uses the @angular/animations package with component decorators to define reusable animation triggers.
This method provides declarative animation definitions while maintaining performance and accessibility standards.
Import BrowserAnimationsModule and use animation decorators to create smooth transitions in Angular components.
// app.module.ts
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
@NgModule({
imports: [BrowserAnimationsModule]
})
export class AppModule {}
// component with animations
import { Component } from '@angular/core'
import { trigger, state, style, transition, animate } from '@angular/animations'
@Component({
selector: 'app-card',
template: `
<div class="card" [@slideIn]="animationState" (click)="toggle()">
<h3>{{ title }}</h3>
<p [@fadeIn]="isVisible ? 'visible' : 'hidden'">{{ content }}</p>
</div>
`,
animations: [
trigger('slideIn', [
transition(':enter', [
style({ transform: 'translateX(-100%)' }),
animate('300ms ease-in', style({ transform: 'translateX(0%)' }))
])
]),
trigger('fadeIn', [
state('visible', style({ opacity: 1 })),
state('hidden', style({ opacity: 0 })),
transition('visible <=> hidden', animate('200ms ease-in-out'))
])
]
})
export class CardComponent {
title = 'Animated Card'
content = 'This content fades in and out'
isVisible = true
animationState = 'in'
toggle() {
this.isVisible = !this.isVisible
}
}
This code imports the animations module and defines animation triggers using the decorative animations API. The slideIn trigger handles entrance animations, while fadeIn manages state-based transitions. The animations are bound to template elements using bracket notation and respond to state changes or component lifecycle events.
Best Practice Note:
This is the animation approach we use in CoreUI Angular components for smooth, performant UI transitions. Always provide reduced-motion alternatives for accessibility and test animations on slower devices to ensure optimal performance.
