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

## Problem statement

Create a horizontal sliding animation. The element will have two states:

- `default`: This is positioned at the top left corner of the page.
- `right`: This is positioned `150px` to the right of the default position.

## Expected behavior

Clicking on the element should trigger the element to move between the two positions with the following animation configurations:

- Duration: `500` milliseconds
Delay: 500 milliseconds
Timing function: ease-in-out

The playground below contains an element with basic styling so you can focus on adding the animation. You’ll also be using a single component to create the animation:
- `app.component.ts`
 - `app.component.html`
 - `app.component.scss`

## Coding exercise

# Problem statement

Create a horizontal sliding animation. The element will have two states:

- `default`: This is positioned at the top left corner of the page.
- `right`: This is positioned `150px` to the right of the default position.

# Expected behavior

Clicking on the element should trigger the element to move between the two positions with the following animation configurations:

- Duration: `500` milliseconds
Delay: 500 milliseconds
Timing function: ease-in-out

The playground below contains an element with basic styling so you can focus on adding the animation. You’ll also be using a single component to create the animation:
- `app.component.ts`
 - `app.component.html`
 - `app.component.scss`

# Coding exercise

Apply what you've learned so far about CSS transitions to complete this challenge.


Challenge: State Change With Slide Animation

Apply what you've learned so far about CSS transitions to complete this challenge.

Before We Start

CSS Transitions

CSS Animations

Web Animations API (WAAPI)

Angular Animations

Third-party Animation Libraries

Appendix

Conclusion

Challenge: State Change With Slide Animation

Problem statement