Angular - Animations

---

---

The term Animation can be defined as the transformation of HTML element from one CSS style to another over a specific period of time. It provides ability to add visual effects and transitions to your web applications. You can apply animation to almost all CSS properties.

The primary focus of designing a web application is to keep users engaged or grab their attention until they perform desired actions. Sure, the application needs to provide valuable information and help the visitors in their task, but visual appearance plays an important role, too. This visual effect is created using animation.

In this tutorial, we are going to learn how we can add animation to an Angular application.

Importance of Animation in Angular Application

Be it an Angular application or any web app, animations are used for several reasons −

• Adding animations can make your application feel more attractive and eye catching.
• It gives feedback to users on their actions. For example, showing a button click animation indicates that something has been triggered.
• Animations make the app look more modern and engaging, which can improve user retention and engagement.
• Animating an item when it appears or when it's selected can draw attention to important elements.
• Without animations, transitions between different CSS styles in your app might feel abrupt. Animations make these transitions smoother.

How Animation Works in Angular?

In Angular, we need to learn the following five core concepts and their relationship to completely understand the workings of animation −

State

State refers to the specific state of the component. A component can have multiple defined states. It is created using state() method. It has two arguments as shown below −

• name: Unique name of the state.

• style: Style of the state defined using style() method.

animations: [ 
   ... 
   state('start', style( { width: 200px; } )) 
   ... 
]

Here, start is the name of the state.

Style

Style refers to the CSS style applied in a particular state. The style() method is used to style the particular state of a component. It uses the CSS property and can have multiple items.

animations: [ 
   ... 
   state('start', style( { width: 200px; opacity: 1 } )) 
   ... 
]

Here, start state defines two CSS properties, width with value 200px and opacity with value 1.

Transition

Transition means the change of state from one state to another. Animation can have multiple transitions. Each transition is defined using transition() function. This function takes two argument −

• Direction Expression between two transition state.

• Details of animation using animate() function.

animations: [ 
   ... 
   transition('start => end', [ 
      animate('1s') 
   ])
   ... 
]

Here, transition() function defines the transition from start state to end state with animation defined in animate() method.

Animation

Animation defines the way the transition from one state to another take place. The animation() function is used to set the animation details. The animate() takes a single argument in the form of below expression −

duration delay easing

• duration: refers the duration of the transition. It is expressed as 1s, 100ms, etc.,

• delay: It is the delay time to start the transition. It is expressed similarly to duration.

• easing: It specifies how to accelerate/decelerate the transition in the given time duration.

Trigger

Every animation needs a trigger to start the animation. The trigger() method is used to set all the animation information such as state, style, transition and animation, in one place and give it a unique name. The unique name is used further to trigger the animation.

animations: [ 
   trigger('enlarge', [ 
      state('start', style({ 
         height: '200px', 
      })), 
      state('end', style({ 
         height: '500px', 
      })), 
      transition('start => end', [ 
         animate('1s') 
      ]), 
      transition('end => start', [ 
         animate('0.5s') 
   ]) ]), 
]

Here, enlarge is the unique name given to the particular animation. It has two state and related styles. It has two transitions, one from start to end and another from end to start. End to start state, do the reverse of the animation.

Trigger can be attached to an element as specified below −

<div [@triggerName]="expression">...</div>;

For example,

<img [@enlarge]="isEnlarge ? 'end' : 'start'">...</img>;

Here,

• @enlarge: trigger is set to image tag and attached to an expression.

• If isEnlarge value is changed to true, then end state will be set and it triggers start => end transition.

• If isEnlarge value is changed to false, then start state will be set and it triggers end => start transition.

Implementing Animation in Angular

To implement animations in Angular, you need to follow these steps:

Here, we set up a <div> element that changes its background color based on hover state using Angular animations.

Step 1: Create an Angular application with a suitable name. We are naming it animation-app.

ng new animation-app

Step 2: Install the @angular/animations module to your project by running the following command −

npm install @angular/animations

It is optional step.

Step 3: Import the BrowserAnimationsModule and provideAnimationsAsync() in the main.ts file as shown in the following code −

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';

bootstrapApplication(AppComponent, {
  providers: [
    BrowserAnimationsModule,  
    provideAnimationsAsync(),
  ]
})

Step 4: Import the trigger, transition, style, animate, state and add the animation inside app.component.ts file −

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
  animations: [
    trigger('backgroundColorChange', [
      state(
        'default',
        style({
          backgroundColor: 'rgb(174, 5, 174)',
        })
      ),
      state(
        'hovered',
        style({
          backgroundColor: 'rgb(248, 174, 225)',
        })
      ),
      transition('default <=> hovered', [animate('0.5s ease-in-out')]),
    ]),
  ],
})
export class AppComponent {
  title = 'Animation Example';
  isHovered = false;
}

In the above code, trigger() function specify an animation, and state(), style(), animate(), and transition() define what happens during the animation.

Step 5: Apply the [@backgroundColorChange] binding to the div element inside app.component.ts file −

<div [@backgroundColorChange]="isHovered ? 'hovered' : 'default'" (mouseenter)="isHovered = true"
(mouseleave)="isHovered = false" class="animated-box">

</div>

The @backgroundColorChange binding applies an animation trigger to the div, which transitions between the hovered and default states based on the isHovered property. The mouseenter and mouseleave event bindings update the isHovered property to TRUE or FALSE when the mouse enters or leaves the div, respectively.

Step 6: Open the CSS file and apply the following style −

.animated-box {
    margin-top: 20px;
    width: 250px;
    height: 250px;
    text-align: center;
    line-height: 250px;
    color: white;
    font-weight: bold;
    transition: background-color 1s ease;
}

Step 7: Run the application using ng serve command to get the output.

Angular Animation API Methods

The @angular/animations module provides the following methods −