or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

animation-composition.mdindex.mdprogrammatic-control.mdreusable-animations.mdstyling-timing.mdtriggers.md
tile.json

tessl/npm-angular--animations

Angular animations integration providing CSS-based animation capabilities with web-animations API support

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@angular/animations@21.0.x

To install, run

npx @tessl/cli install tessl/npm-angular--animations@21.0.0

index.mddocs/

Angular Animations

The Angular Animations library provides a comprehensive API for creating CSS-based animations in Angular applications. It offers a declarative syntax for defining complex animations, transitions, and timing controls, with integration for the Web Animations API and CSS transitions.

Package Information

  • Package Name: @angular/animations
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @angular/animations
  • Peer Dependencies: @angular/core

Core Imports

import {
  trigger,
  state,
  style,
  transition,
  animate,
  keyframes,
  group,
  sequence,
  query,
  stagger,
  animateChild,
  useAnimation,
  animation,
  AnimationBuilder,
  AnimationPlayer,
  AnimationEvent,
  AUTO_STYLE
} from '@angular/animations';

Basic Usage

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

@Component({
  selector: 'app-hero',
  template: `
    <div [@slideIn]="'in'" class="hero">
      <h1>Welcome</h1>
    </div>
  `,
  animations: [
    trigger('slideIn', [
      transition(':enter', [
        style({ transform: 'translateX(-100%)' }),
        animate('300ms ease-in', style({ transform: 'translateX(0%)' }))
      ])
    ])
  ]
})
export class HeroComponent {}

Architecture

Angular Animations is built around several key components:

  • Declarative API: Functions like trigger(), state(), and transition() for defining animations
  • Animation Metadata: Type-safe configuration objects that describe animation behavior
  • Animation Players: Programmatic control over animation playback via AnimationPlayer interface
  • Animation Builder: Service for creating animations dynamically with AnimationBuilder
  • Timing & Easing: Flexible timing syntax supporting duration, delay, and easing functions
  • Web Animations Integration: Leverages browser Web Animations API for optimal performance

Capabilities

Animation Triggers

Core building blocks for defining named animations that can be attached to Angular components and triggered by state changes.

function trigger(
  name: string, 
  definitions: AnimationMetadata[]
): AnimationTriggerMetadata;

function state(
  name: string,
  styles: AnimationStyleMetadata,
  options?: { params: { [name: string]: any } }
): AnimationStateMetadata;

function transition(
  stateChangeExpr: string | ((fromState: string, toState: string, element?: any, params?: { [key: string]: any }) => boolean),
  steps: AnimationMetadata | AnimationMetadata[],
  options?: AnimationOptions | null
): AnimationTransitionMetadata;

Animation Triggers

Animation Styling and Timing

Functions for defining CSS styles and timing parameters that control how animations appear and behave.

function style(
  tokens: '*' | { [key: string]: string | number } | Array<'*' | { [key: string]: string | number }>
): AnimationStyleMetadata;

function animate(
  timings: string | number,
  styles?: AnimationStyleMetadata | AnimationKeyframesSequenceMetadata | null
): AnimationAnimateMetadata;

function keyframes(steps: AnimationStyleMetadata[]): AnimationKeyframesSequenceMetadata;

const AUTO_STYLE = '*';

Styling and Timing

Animation Composition

Advanced functions for creating complex animations by combining multiple animation steps in parallel or sequence.

function group(
  steps: AnimationMetadata[],
  options?: AnimationOptions | null
): AnimationGroupMetadata;

function sequence(
  steps: AnimationMetadata[],
  options?: AnimationOptions | null
): AnimationSequenceMetadata;

function query(
  selector: string,
  animation: AnimationMetadata | AnimationMetadata[],
  options?: AnimationQueryOptions | null
): AnimationQueryMetadata;

function stagger(
  timings: string | number,
  animation: AnimationMetadata | AnimationMetadata[]
): AnimationStaggerMetadata;

Animation Composition

Reusable Animations

System for creating and using reusable animation definitions across multiple components.

function animation(
  steps: AnimationMetadata | AnimationMetadata[],
  options?: AnimationOptions | null
): AnimationReferenceMetadata;

function useAnimation(
  animation: AnimationReferenceMetadata,
  options?: AnimationOptions | null
): AnimationAnimateRefMetadata;

function animateChild(
  options?: AnimateChildOptions | null
): AnimationAnimateChildMetadata;

Reusable Animations

Programmatic Animation Control

Classes and interfaces for controlling animations programmatically through code rather than declarative templates.

abstract class AnimationBuilder {
  abstract build(animation: AnimationMetadata | AnimationMetadata[]): AnimationFactory;
}

abstract class AnimationFactory {
  abstract create(element: any, options?: AnimationOptions): AnimationPlayer;
}

interface AnimationPlayer {
  parentPlayer: AnimationPlayer | null;
  readonly totalTime: number;
  onDone(fn: () => void): void;
  onStart(fn: () => void): void;
  onDestroy(fn: () => void): void;
  init(): void;
  hasStarted(): boolean;
  play(): void;
  pause(): void;
  restart(): void;
  finish(): void;
  destroy(): void;
  reset(): void;
  setPosition(position: number): void;
  getPosition(): number;
}

Programmatic Control

Core Types

interface AnimationOptions {
  delay?: number | string;
  params?: { [name: string]: any };
}

interface AnimationEvent {
  fromState: string;
  toState: string;
  totalTime: number;
  phaseName: string;
  element: any;
  triggerName: string;
  disabled: boolean;
}

enum AnimationMetadataType {
  State = 0,
  Transition = 1,
  Sequence = 2,
  Group = 3,
  Animate = 4,
  Keyframes = 5,
  Style = 6,
  Trigger = 7,
  Reference = 8,
  AnimateChild = 9,
  AnimateRef = 10,
  Query = 11,
  Stagger = 12
}

Important Notes

Deprecation Warning: As of Angular 20.2, most APIs in this library are deprecated in favor of the new animate.enter and animate.leave APIs. These deprecated APIs are planned for removal in Angular v23.

Browser Support: Requires Web Animations API support or appropriate polyfills for older browsers.

Module Setup: Requires BrowserAnimationsModule or NoopAnimationsModule to be imported in your Angular application.