```
### Programmatic Animations
Use `AnimationBuilder` for runtime control:
```typescript theme={null}
import { AnimationBuilder, style, animate } from '@angular/animations';
constructor(private builder: AnimationBuilder) {}
playAnimation(element: ElementRef) {
const factory = this.builder.build([
style({ opacity: 0 }),
animate('500ms', style({ opacity: 1 }))
]);
const player = factory.create(element.nativeElement);
player.play();
}
```
Programmatic animation builder
Creates an animation factory from metadata
```typescript theme={null}
build(animation: AnimationMetadata | AnimationMetadata[]): AnimationFactory
```
Controls animation playback
Start the animation
Pause the animation
Jump to the end state
Reset to the beginning
Clean up the animation
## Route Animations
Animate navigation between routes:
```typescript route-animations.ts theme={null}
export const routeAnimations = trigger('routeAnimations', [
transition('HomePage <=> AboutPage', [
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 })
])
]);
```
```typescript app.component.ts theme={null}
@Component({
template: `
`,
animations: [routeAnimations]
})
export class AppComponent {
getRouteAnimationData() {
// Return route data for animation state
}
}
```
## Performance Optimization
Animate `transform` and `opacity` for GPU acceleration. Avoid animating `width`, `height`, `top`, or `left`.
Use `NoopAnimationsModule` in tests or for users who prefer reduced motion
Use `{ optional: true }` in queries to prevent errors when elements don't exist
Animations clean up automatically, but call `destroy()` on manual players
### Disable Animations
```typescript theme={null}
import { provideNoopAnimations } from '@angular/animations/browser';
export const appConfig: ApplicationConfig = {
providers: [
provideNoopAnimations(), // Disables all animations
]
};
```
### Respect User Preferences
```typescript theme={null}
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
```
## API Reference
### Core Functions
Creates a named animation trigger
```typescript theme={null}
trigger(name: string, definitions: AnimationMetadata[]): AnimationTriggerMetadata
```
Defines a named state with styles
```typescript theme={null}
state(name: string, styles: AnimationStyleMetadata, options?: AnimationOptions): AnimationStateMetadata
```
Defines a transition between states
```typescript theme={null}
transition(stateChangeExpr: string, steps: AnimationMetadata | AnimationMetadata[], options?: AnimationOptions): AnimationTransitionMetadata
```
Defines styles for an animation state
```typescript theme={null}
style(tokens: '*' | { [key: string]: string | number } | Array<'*' | { [key: string]: string | number }>): AnimationStyleMetadata
```
Defines timing and styles for animation
```typescript theme={null}
animate(timings: string | number, styles?: AnimationStyleMetadata | AnimationKeyframesSequenceMetadata): AnimationAnimateMetadata
```
### Composition Functions
Runs animation steps sequentially
```typescript theme={null}
sequence(steps: AnimationMetadata[], options?: AnimationOptions): AnimationSequenceMetadata
```
Runs animation steps in parallel
```typescript theme={null}
group(steps: AnimationMetadata[], options?: AnimationOptions): AnimationGroupMetadata
```
Defines keyframe-based animation
```typescript theme={null}
keyframes(steps: AnimationStyleMetadata[]): AnimationKeyframesSequenceMetadata
```
Queries child elements for animation
```typescript theme={null}
query(selector: string, animation: AnimationMetadata | AnimationMetadata[], options?: AnimationQueryOptions): AnimationQueryMetadata
```
Staggers animations across multiple elements
```typescript theme={null}
stagger(timings: string | number, animation: AnimationMetadata | AnimationMetadata[]): AnimationStaggerMetadata
```
Triggers child animations
```typescript theme={null}
animateChild(options?: AnimateChildOptions): AnimationAnimateChildMetadata
```
### Reusable Animations
Defines a reusable animation
```typescript theme={null}
animation(steps: AnimationMetadata | AnimationMetadata[], options?: AnimationOptions): AnimationReferenceMetadata
```
Uses a reusable animation
```typescript theme={null}
useAnimation(animation: AnimationReferenceMetadata, options?: AnimationOptions): AnimationAnimateRefMetadata
```
### Constants
Automatically compute style values
```typescript theme={null}
style({ height: AUTO_STYLE })
```
## Examples
### Complete Component Example
```typescript theme={null}
import { Component } from '@angular/core';
import { trigger, state, style, transition, animate, keyframes, query, stagger } from '@angular/animations';
@Component({
selector: 'app-hero-list',
template: `
`,
animations: [
trigger('listAnimation', [
transition('* => *', [
query(':enter', [
style({ opacity: 0, transform: 'translateY(-15px)' }),
stagger('50ms', [
animate('300ms ease-out',
style({ opacity: 1, transform: 'translateY(0)' })
)
])
], { optional: true })
])
]),
trigger('itemAnimation', [
transition(':enter', [
style({ opacity: 0, transform: 'scale(0.8)' }),
animate('200ms cubic-bezier(0.68, -0.55, 0.265, 1.55)',
style({ opacity: 1, transform: 'scale(1)' })
)
]),
transition(':leave', [
animate('200ms ease-in',
style({ opacity: 0, transform: 'scale(0.8)' })
)
])
])
]
})
export class HeroListComponent {
items = [
{ name: 'Item 1' },
{ name: 'Item 2' },
{ name: 'Item 3' }
];
toggleList() {
this.items = this.items.length > 0 ? [] : [
{ name: 'Item 1' },
{ name: 'Item 2' },
{ name: 'Item 3' }
];
}
}
```
## Browser Support
Angular animations use the Web Animations API. For older browsers, you may need to include a polyfill.
### Polyfill Installation
```bash theme={null}
npm install web-animations-js
```
```typescript polyfills.ts theme={null}
import 'web-animations-js';
```
## Resources
Complete guide to Angular animations
MDN Web Animations documentation
Interactive examples and demos
Web animation performance guide
***
**Start Simple**
Begin with basic fade and slide animations, then progressively add complexity as needed. Most UI animations should be subtle and fast (200-400ms).