Reusable animations

IMPORTANT: The Angular team recommends using native CSS for animations instead of the Animations package for all new code. Use this guide to understand existing code built with the Animations Package. See Migrating away from Angular's Animations package to learn how you can start using pure CSS animations in your apps.

This topic provides some examples of how to create reusable animations.

Create reusable animations

To create a reusable animation, use the animation() function to define an animation in a separate .ts file and declare this animation definition as a const export variable. You can then import and reuse this animation in any of your application components using the useAnimation() function.

src/app/animations.ts

import {animation, style, animate, trigger, transition, useAnimation} from '@angular/animations';export const transitionAnimation = animation([  style({    height: '{{ height }}',    opacity: '{{ opacity }}',    backgroundColor: '{{ backgroundColor }}',  }),  animate('{{ time }}'),]);export const sharedAnimation = animation([  style({    height: 0,    opacity: 1,    backgroundColor: 'red',  }),  animate('1s'),]);export const triggerAnimation = trigger('openClose', [  transition('open => closed', [    useAnimation(transitionAnimation, {      params: {        height: 0,        opacity: 1,        backgroundColor: 'red',        time: '1s',      },    }),  ]),]);

In the preceding code snippet, transitionAnimation is made reusable by declaring it as an export variable.

HELPFUL: The height, opacity, backgroundColor, and time inputs are replaced during runtime.

You can also export a part of an animation. For example, the following snippet exports the animation trigger.

src/app/animations.1.ts

import {animation, style, animate, trigger, transition, useAnimation} from '@angular/animations';export const transitionAnimation = animation([  style({    height: '{{ height }}',    opacity: '{{ opacity }}',    backgroundColor: '{{ backgroundColor }}',  }),  animate('{{ time }}'),]);export const sharedAnimation = animation([  style({    height: 0,    opacity: 1,    backgroundColor: 'red',  }),  animate('1s'),]);export const triggerAnimation = trigger('openClose', [  transition('open => closed', [    useAnimation(transitionAnimation, {      params: {        height: 0,        opacity: 1,        backgroundColor: 'red',        time: '1s',      },    }),  ]),]);

From this point, you can import reusable animation variables in your component class. For example, the following code snippet imports the transitionAnimation variable and uses it via the useAnimation() function.

src/app/open-close.component.ts

import {Component, input} from '@angular/core';import {transition, trigger, useAnimation, AnimationEvent} from '@angular/animations';import {transitionAnimation} from './animations';@Component({  selector: 'app-open-close-reusable',  animations: [    trigger('openClose', [      transition('open => closed', [        useAnimation(transitionAnimation, {          params: {            height: 0,            opacity: 1,            backgroundColor: 'red',            time: '1s',          },        }),      ]),    ]),  ],  templateUrl: 'open-close.component.html',  styleUrls: ['open-close.component.css'],})export class OpenCloseBooleanComponent {  isOpen = false;  toggle() {    this.isOpen = !this.isOpen;  }  logging = input(false);  onAnimationEvent(event: AnimationEvent) {    if (!this.logging) {      return;    }  }}

More on Angular animations

You might also be interested in the following: