---
title: 🟢 Simple Animations
description: Challenge 46 is about learning Angular's integrated animation API
author: sven-brodny
contributors:
  - svenson95
challengeNumber: 46
command: angular-simple-animations
sidebar:
  order: 17
---

## Information

This is the first of two animation challenges, the goal of this series is to master animations in Angular.

Well-designed animations can make your application more fun and straightforward to use, but they aren't just cosmetic. Animations can improve your application and user experience in a number of ways:

- Without animations, web page transitions can seem abrupt and jarring.
- Motion greatly enhances the user experience, so animations give users a chance to detect the application's response to their actions.
- Good animations intuitively call the user's attention to where it is needed.

I would recommend you read the [official documentation](https://angular.dev/guide/animations). You will learn everything that is necessary to successfully complete the challenge.

Otherwise look at this [working example](https://svenson95.github.io/ng-xmp-animations/) and [git repo](https://github.com/svenson95/ng-xmp-animations) to get inspired.

## Statement

The goal of this challenge is to add animations, they should run when the user arrives on the page or reload the page.

## Constraints

- Don't use any CSS and utilize Angular's integrated `@angular/animations` API.
- Don't trigger the animations with a button like in the examples, rather when the user enter or reload the page.

### Level 1

Add a fading or moving animation for the paragraphs on the left side.

<video controls src="https://github.com/tomalaforge/angular-challenges/assets/46655156/a43c3995-16ef-4d1f-bcfc-602b4ce80937">
</video>

### Level 2

Add a stagger animation for the list on the right side.

<video controls src="https://github.com/tomalaforge/angular-challenges/assets/46655156/1a01af1b-44fc-4616-8793-681219f9d8bc">
</video>
