Gain insights into creating beautiful, performant animations in Angular. Delve into CSS transitions, Web Animations API, and Angular animations, while exploring performance and debugging techniques.

angular.tar.gz

angular

Animations play a crucial role in an application’s user experience (UX). A set of well-designed animations can make an application feel fast, polished, and professional. However, creating animations can be a daunting task that involves knowing what is available and how to choose the right approach for each task.

You will start with the easiest methods and move on to more advanced animation methods as you make your way through this course. You’ll start with general animation techniques, covering CSS transitions, animations, and the Web Animations API, followed by Angular animations and integrating external animation libraries. Lastly, you’ll finish with a deep dive into animation performance and debugging.

This course will provide you with information and advice to help you create beautiful and performant animations in Angular applications. By the end of the course, you will be able to create performant animations and choose the right tools to create them effectively.

Animations in Angular

Angular animations are based on CSS web transition functionality, which means that anything that can be styled or transformed through CSS can be animated the same way using Angular animations, with the added advantage of giving the developer more control in orchestrating it. This provides us with animations that have CSS-like performance along with the flexibility of JavaScript out of the box without additional dependencies.


# How to use

To use `@angular/animations` in our application, we'll have to do the following:

1. Verify that the `@angular/animations` package is installed and listed as a dependency in our `package.json`. If not, add it by running `npm install --save @angular/animations`
2. Import `BrowserAnimationsModule` and add it to the module's imports array (**line 7**):

// app.module.ts

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

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

> Angular also comes with `NoopAnimationsModule`, which we can use to disable all animations globally. It’s more commonly used for testing to mock the real animation when the animations are either too slow or don’t play any role in what’s being tested.


# Animation APIs

Angular’s animation module provides functional APIs to create and control our animations. Angular animations consist of five main functions:
- `trigger`: This is a container for all other animation function calls. It tells Angular which set of styles/animation to apply to the element.
- `state`: This is a named set of CSS styles applied on successful transition to a given state.
- `style`:This is a set of CSS styles applied to the element at a given state.

- `animate`: This specifies the timing information for a transition.
- `transition`: This defines the animation sequence between two states.
> **Note**: You can find a complete list of the available functions in Angular’s [official docs](https://angular.io/guide/animations#animations-api-summary).

An introduction to Angular animations, how they work, and how to use them in your project.

Before We Start

CSS Transitions

CSS Animations

Web Animations API (WAAPI)

Angular Animations

Third-party Animation Libraries

Appendix

Conclusion

Introduction to Angular Animations

How to use