Challenge: Create Sequential and Parallel Animations

Apply what you've learned so far about Angular animations to create a combination of sequential and parallel animations.

We'll cover the following

Problem statement

Using Angular animations in an Angular application, create an enter and exit animation for the target element with the following configurations:

Enter animation

A sequential animation that plays one after the other:

  • Original stateIt has an opacity of 0 and is scaled down to 0.5 of its original size.

  • First animation: It fades in from an opacity of 0 to 1 for 500ms.

  • Second animation: It scales up to its original size for 300ms.

Exit animation

A parallel animation that plays together:

  • It fades out to an opacity of 0 for 500ms.
  • It rotates 360deg for 300ms as it fades 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, and app.component.scss.

Get hands-on with 1200+ tech skills courses.