Introduction to Angular Animations

Before we begin the tutorial about Angular Animations, you need to have some ideas about Angular as well as Animations individually.

Angular is a framework build for making intricate and efficient single-page applications. Angular documentation provides more information.

Animations mean changing the physical appearance of an element using a set of properties in a given time. It gives life to HTML elements and makes it more interactive.

Assuming that you have basic knowledge of Angular and Animations, we move forward. JavaScript and CSS both are used to create Animations. Many questions may arise about Animations like

1. What is Angular Animation?
2. Why use Angular Animation over CSS animation?
3. How to use Angular Animation?

What is Angular Animation?

The Animation is a set of property through which HTML elements gets into motion. It is a fancy way to display HTML elements on a website or application. Angular provides a way to create animations similar to CSS animations. Angular animations are built on top of the standard Web Animations API (WAAPI) and run natively on browsers that support it.

Why use Angular Animation over CSS animation?

There are many different opinions on performance for Animation using CSS and Angular or JavaScript (Angular is a framework made over JavaScript). In some cases, CSS is better than Angular and vice-versa.

Angular provides simplicity in comparison with CSS while performing complex animations on a single element at various events. The Browser uses GPU layers to process animations so that CPU can work on the main task. The Browser takes advantage of GPU speed boost by creating a GPU layer for that element when a change in a 3D characteristic like translate3d() or matrix3d() triggers the Browser.

How to use Angular Animation?

Angular provides @angular/animations and @angular/platform-browser modules for Animation. We are going to perform simple Animation to understand the use of Angular Animation modules, and it's methods.

1. First, we need to import animation modules to our main app module.

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 { }

2. Then, import animation function in component files.

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

3. Add animation metadata property in a component.

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  animations: [
    // animation triggers go here
    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 OpenCloseComponent {
  isOpen = true;

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

}

4. Use animation in html file

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

5. Add some CSS class

:host {
  display: block;
}

.open-close-container {
  border: 1px solid #dddddd;
  margin-top: 1em;
  padding: 20px 20px 0px 20px;
  color: #000000;
  font-weight: bold;
  font-size: 20px;
}

6. Output

We have completed simple demo code for Angular Animations which provides some basic idea for implementation.

References:-

https://angular.io/guide/animations
https://css-tricks.com/myth-busting-css-animations-vs-javascript/
https://stackoverflow.com/questions/40949262/angular-2-animation-vs-css-animation-when-to-use-what

Third Rock Techkno is a leading IT services company. We are a top-ranked web, voice and mobile app development company with over 10 years of experience. Client success forms the core of our value system.

We have expertise in the latest technologies including angular, react native, IOS, Android and more. Third Rock Techkno has developed smart, scalable and innovative solutions for clients across a host of industries.

Our team of dedicated developers combine their knowledge and skills to develop and deliver web and mobile apps that boost business and increase output for our clients.