Introduction to Angular animations

Animation provides the illusion of motion: HTML elements change styling over time. Typically, animations involve multiple style transformations over time. An HTML element can move, change color, grow or shrink, fade, or slide off the page. These changes can occur simultaneously or sequentially. Angular's animation system is built on CSS functionality, which means you can animate any property that the browser considers animatable.

Getting started

The main Angular modules for animations are @angular/animations and @angular/platform-browser. When you create a new project using the CLI, these dependencies are automatically added to your project.

To get started with adding Angular animations to your project, import the animation-specific modules along with standard Angular functionality.

Step 1: Enable the animations module

Import BrowserAnimationsModule, which introduces the animation capabilities into your Angular root application module.

TypeScript Code:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule
  ],
  declarations: [ ],
  bootstrap: [ ]
})
export class AppModule { }

Live Demo:

It is just a code snippet explaining a particular concept and may not have any output

See the Pen animation_app.module.ts by w3resource (@w3resource) on CodePen.

Step 2: Import animation functions into component files

If you plan to use specific animation functions in component files, import those functions from @angular/animations.

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

Step 3: Adding the animation metadata property

In the component file, add a metadata property called animations: within the @Component() decorator. You put the trigger that defines an animation within the animations metadata property.

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  animations: [
    // animation triggers go here
  ]
})

Animating a simple transition

Let's animate a simple transition that changes a single HTML element from one state to another. For example, you can specify that a button displays either Open or Closed based on the user's last action. When the button is in the open state, it's visible and yellow. When it's the closed state, it's transparent and green.

Animation state and styles

Generally we Angular's state() function to define different states to call at the end of each transition. This function takes two arguments: a unique name like open or closed and a style() function.

Use the style() function to define a set of styles to associate with a given state name.

This is how Angular's state() function works with the style() function to set CSS style attributes. We set multiple style attributes at the same time for the state. In the open state, the button has a height of 200 pixels, an opacity of 1, and a background color of yellow.

// ...
state('open', style({
  height: '200px',
  opacity: 1,
  backgroundColor: 'yellow'
})),

In the closed state, shown below, the button has a height of 100 pixels, an opacity of 0.5, and a background color of green.

Transitions and timing

In Angular, you can set multiple styles without any animation. However, without further refinement, the button instantly transforms with no fade, no shrinkage, or other visible indicator that a change is occurring.

To make the change less abrupt, we need to define an animation transition to specify the changes that occur between one state and another over a period of time. The transition() function accepts two arguments: the first argument accepts an expression that defines the direction between two transition states, and the second argument accepts an animate() function. Example we could have for the closed state:

transition('open => closed', [
  animate('1s')
]),

And for open state we could have:

transition('open => closed', [
  animate('1s')
]),

Triggering the animation

A animation requires a trigger, so that it knows when to start. The trigger() function collects the states and transitions and gives the animation a name, so that you can attach it to the triggering element in the HTML template.

The trigger() function describes the property name to watch for changes. When a change occurs, the trigger initiates the actions included in its definition. These actions can be transitions or other functions.

Defining animations and attaching them to the HTML template

Animations are defined in the metadata of the component that controls the HTML element to be animated. Put the code that defines your animations under the animations: property within the @Component() decorator.

TypeScript Code:

@Component({
  selector: 'app-open-close',
  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')
      ]),
    ]),
  ],
  templateUrl: 'open-close.component.html',
  styleUrls: ['open-close.component.css']
})
export class OpenCloseComponent {
  isOpen = true;

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

}

Live Demo:

It is just a code snippet explaining a particular concept and may not have any output

See the Pen open-close.component.ts by w3resource (@w3resource) on CodePen.

When you've defined an animation trigger for a component, you can attach it to an element in that component's template by wrapping the trigger name in brackets and preceding it with an @ symbol. Then, you can bind the trigger to a template expression using standard Angular property binding syntax.

<div [@openClose]="isOpen ? 'open' : 'closed'" class="open-close-container">
  <p>The box is now {{ isOpen ? 'Open' : 'Closed' }}!</p>
</div>

Previous: Animation transitions and triggers
Next: Complex Sequences