Angular 12 Animations

Nowadays, the user-interface design of your website is extremely important to its success. You are more likely to attract and retain less traffic if your website lacks web transitions and animations.

In today's online economy, traffic has become an important source of revenue for both individuals and businesses. To attract, retain, and improve your site ratings, it is always important to create an easier, fun, interactive, and entertaining site for users to use.

The use of animations in web design is one of the tricks that most successful web builders have implemented to improve the user experience of their users. In this chapter, I'll show you how to implement animations into your Angular 12 project.

How to animate a web Component

Using the Angular 12 Animation, it is possible to make your webpage components animate based on various user actions on your site. For instance, you can make a web component change color, fade, shine or glow if the user clicks or hover on the component.

The steps below will help you animate get started with Angular 12 animations:

Step 1- Create a new Project

First of all, create a new Angular 12 project and name it "animations_project." We will use this project to add and test our codes.

Step 2- Add Animations Module

We need to import our Animations module into our application to enhance animations work. Without this code, your animations will need a miracle to work. Now, navigate to the app.nodule.ts file in our project file and add the code below

// app.module.ts
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
imports: [ BrowserModule, BrowserAnimationsModule ],

Step 3- Link Bootstrap to your Project

Bootstrap is also a necessity. We will need it to style our page and make it beautiful.

To add Bootstrap, just visit the official Bootstrap website and copy-paste the Bootstrap CDN URL on your site

In your index.html page and paste the CDN links to link Bootstrap

<!-- index.html -->
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Animation</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

</head>
<body>
  <app-root></app-root>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>

Step 4- Create Animation component

Now, browse to the app folder in your src/ folder, create a new TypeScript file, and name animations.ts. Paste the code below and save

// animate.component.ts
import { Component } from "@angular/core";
@Component({
selector: "app-animate",
template: `<div class=&quot;myblock mx-auto&quot;></div>`,
styles: [`
.myblock {
background-color: green;
width: 300px;
height: 250px;
border-radius: 5px;
margin: 5rem;
}
`]
})
export class AnimateComponent {}

Now, add the following codes to add the component to your app.nodule.ts file

// app.module.ts
import { AnimateComponent } from "./animate.component";
declarations: [
AppComponent, AnimateComponent
],

Import selector to your app. components file

// app.component.ts
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `<app-animate></app-animate>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular 5 Animations Tutorial';
}

Step 5- Make the animation event-based

We will make our animations work after we click on a button on the web browser. Just add the code below to create the button and the square to be animated

// app.component.ts
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `<div class='container'>
<div class='row'>
<div class='col-md-6'>
<div class='row'>
<div class='col-md-12 buttonanimate'>
<div class='col-md-6'>
<a (click)='animateSquare("normal")' class='btn btn-danger'>Animate1</a>
</div>
<div class='col-md-6'>
<a (click)='animateSquare("animated")' class='btn btn-warning'>Animate2</a>
</div>
</div>
</div>
<div class='col-md-3'>
</div>
</div>
<div class='col-md-6'>
<app-animate></app-animate>
</div>
</div>
</div>`,

styleUrls: ["./app.component.css"]
})
export class AppComponent {
title = "Angular 5 Animations Tutorial";
nextState = "normal";
animateSquare(state) {
this.nextState = state;
}}

Step 6- Add CSS code

We will include the animation functions in this file. That is, when the button is clicked, the square will be animated accordingly. It will be transformed from normal state to animated state and from animated to normal state.

// animate.component.ts
import { Component, Input } from "@angular/core";
import { trigger, state, style, animate, transition } from "@angular/animations";
@Component({
selector: "app-animate",
template: `<div [@changeState]=&quot;currentState&quot; class=&quot;myblock mx-auto&quot;></div>`,
styles: [`
.myblock {
background-color: green;
width: 300px;
height: 250px;
border-radius: 5px;
margin: 5rem;
}
`],
animations: [
trigger("changeState", [
state("normal", style({
backgroundColor: "green",
transform: "scale(1)"
})),
state("animated", style({
backgroundColor: "blue",
transform: "scale(1.5)"
})),

transition("*=>normal", animate("800ms")),
transition("*=>animated", animate("200ms"))
])
]
})
export class AnimateComponent {
@Input() currentState;
}

Conclusion

That's how to create an animation using angular 12