@angular/animations

What is @angular/animations?

The @angular/animations package provides powerful animation capabilities and tools to Angular applications. It allows developers to define complex animations and transitions in a declarative manner, directly within their Angular components.

What are @angular/animations's main functionalities?

Trigger and state-based animations

This feature allows defining animations based on triggers and states. The example shows an animation trigger named 'openClose' with two states, 'open' and 'closed', and transitions between these states with different styles and durations.

import { trigger, state, style, animate, transition } from '@angular/animations';

@Component({
  selector: 'my-component',
  templateUrl: 'my-component.html',
  animations: [
    trigger('openClose', [
      state('open', style({
        height: '200px',
        opacity: 1,
        backgroundColor: 'yellow'
      })),
      state('closed', style({
        height: '100px',
        opacity: 0.5,
        backgroundColor: 'green'
      })),
      transition('open => closed', [
        animate('1s')
      ]),
      transition('closed => open', [
        animate('0.5s')
      ]),
    ]),
  ]
})
export class MyComponent {
  isOpen = true;

  toggle() {
    this.isOpen = !this.isOpen;
  }
}

Animation callbacks

Animation callbacks allow you to listen for when an animation starts and ends. In this example, the 'onAnimationEvent' method is called with the animation event, which includes the phase name ('start' or 'done').

import { trigger, state, style, animate, transition } from '@angular/animations';

@Component({
  selector: 'my-component',
  templateUrl: 'my-component.html',
  animations: [
    trigger('openClose', [
      transition('open => closed', [
        animate('1s', style({ opacity: 0 }))
      ]),
    ]),
  ]
})
export class MyComponent {
  animationStatus = 'ready';

  onAnimationEvent(event: AnimationEvent) {
    this.animationStatus = event.phaseName;
  }
}

Reusable animations

Reusable animations allow you to define an animation once and reuse it in different components or triggers. The example defines a 'fadeInAnimation' and uses it in a component with the 'fadeIn' trigger.

import { animation, useAnimation, transition, trigger } from '@angular/animations';

export const fadeInAnimation = animation([ animate('100ms ease-in', style({ opacity: 1 })) ]);

@Component({
  selector: 'my-component',
  templateUrl: 'my-component.html',
  animations: [
    trigger('fadeIn', [
      transition(':enter', useAnimation(fadeInAnimation))
    ])
  ]
})
export class MyComponent {}

Other packages similar to @angular/animations

react-spring

React-spring is a spring-physics based animation library for React applications. It provides a similar declarative API for defining animations but is tailored for React instead of Angular. It offers a different set of primitives and hooks for creating animations in a React environment.

animejs

Anime.js is a lightweight JavaScript animation library that works with any web framework, including Angular. It provides a more imperative approach to animations and includes a wide range of features for animating CSS properties, SVG, DOM attributes, and JavaScript Objects. It is not as tightly integrated with Angular as @angular/animations.

README

Angular

The sources for this package are in the main Angular repo. Please file issues and pull requests against that repo.

Usage information and reference details can be found in Angular documentation.

License: MIT

Changelog

20.0.0-rc.2 (2025-05-21)

Deprecations

platform-browser

• All entries of the @angular/platform-browser-dynamic

Breaking Changes

core

• Resource.value() now returns a default value when in a loading state after reloading the error state
• Resource.value() now throws an error when it's in an error state. Previously it returned undefined.
• Resource.error now has a type of Signal<Error | undefined> instead of Signal<unknown>
• Resource.reload has been moved to WritableResource.reload.

common

| Commit | Type | Description | | -- | -- | -- | | af7881abac | fix | cancel reader when app is destroyed (#61528) | | 966df84351 | fix | prevent reading chunks if app is destroyed (#61354) |

compiler

| Commit | Type | Description | | -- | -- | -- | | e74266b108 | fix | avoid conflicts between HMR code and local symbols (#61550) |

compiler-cli

| Commit | Type | Description | | -- | -- | -- | | b57084267e | fix | Always retain prior results for all files (#61487) | | 7a3a41f33f | fix | avoid ECMAScript private field metadata emit (#61227) |

core

| Commit | Type | Description | | -- | -- | -- | | 7efb3384a7 | fix | cleanup rxResource abort listener (#58306) | | b90160d10a | fix | cleanup testability subscriptions (#61261) | | 3ba39bc28f | fix | getting resource value throws an error instead of returning undefined (#61441) | | ca6295e90b | fix | handle different DI token types in Chrome DevTools integration (#61333) | | d62379bb13 | fix | move reload method from Resource to WritableResource (#61441) | | a89f1cff24 | fix | narrow error type for resources API (#61441) | | 6e79eaf739 | fix | reading resource value after reload in the error state (#61441) | | 350776b412 | fix | TestBed.tick should ensure test components are synchronized (#61382) | | 648d42fe65 | fix | Testing should not throw when Zone does not patch test FW APIs (#61376) | | 5dbeb42308 | fix | unregister onDestroy in toSignal. (#61514) | | 30e081287d | fix | update min Node.js support to 20.19, 22.12, and 24.0 (#61500) |

platform-browser

| Commit | Type | Description | | -- | -- | -- | | bc2cab747f | refactor | Deprecate the platform-browser-dynamic package (#61043) |

platform-server

| Commit | Type | Description | | -- | -- | -- | | 6d8e57d131 | perf | speed up resolution of base (#61392) |

<!-- CHANGELOG SPLIT MARKER -->

<a name="19.2.12"></a>