🟢 Simple Animations

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. You will learn everything that is necessary to successfully complete the challenge.

Otherwise, look at this working example and git repo 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.

Level 2

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