A reusable cascade animation with Angular Animation
Tags: tutorial, angular, typescript, css
Published: 2022-08-23 00:01:14

Hi guys, how is everything??

Have you ever thought about how to make the user experience better when we have a list of cards!?

Today, I gonna show how we can do it with a card "cascade" animation and have a nice card page using the power of [Angular Animations](https://angular.io/guide/animations)!

So, first let's talk a little bit about Angular Animations!

# Angular Animations

The Angular animations is build on CSS functionality, so we can animate whatever properties the browser accepts and we can do a reusable animations and use it in whatever our components! 

Let's Do It!

* First

We need to make resources available for our app, so we need import the [BrowserAnimationsModule](https://angular.io/api/platform-browser/animations/BrowserAnimationsModule) in our Angular root application module!

``` typescript
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({ 
   imports: [
     BrowserAnimationsModule 
   ]
   ...
})
```

* Second

We are going to make a reusable animation, so inside of our `app` folder let's create an `animations` folder and inside it we are going to create an `animations.ts` file! And we have a result like in the image below:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3f0ctne28gnw6usdwcmr.png)

Now, let's make our animation!

Inside of the `animations.ts` we will import the functions like bellow:

```typescript
import {
  animate, keyframes, query, stagger,
  state,
  style,
  transition,
  trigger,
} from '@angular/animations';
```

Let's start creating a const and add the `trigger` function:

```typescript
...

export const animatedListCards = 
   trigger('listCardAnimation', [
      ...     
   ]);
``` 
* Trigger: The [trigger](https://angular.io/guide/animations#triggering-the-animation) is responsible to get the state, the transitions and give a name for the our animation!

Now, we need to configure the `transition`, we will to use the `* => *` to get any state.

```typescript
...

export const animatedListCards = 
   trigger('listCardAnimation', [
      transition('* => *'. [
         ...
      ])   
   ]);
``` 
* Transition: We need to define an animation [transition](https://angular.io/guide/animations#triggering-the-animation) because we need to specify when the animation will be applied!

After that we need to configure the rest of our animation!

```typescript
...

export const animatedListCards = 
   trigger('listCardAnimation', [
      transition('* => *'. [
        query(':enter', style({
          opacity: 0,
        }), {optional: true}),
        query(':enter', stagger('300ms', [
          animate('.8s ease-in', keyframes([
            style({opacity: 0, transform: 'translateY(-30px)', offset: 0}),
            style({opacity: .5, transform: 'translateY(20px)', offset: 0.3}),
            style({opacity: 1, transform: 'translateY(0)', offset: 1}),
          ]))
        ]),{optional: true})
      ])   
   ]);
``` 

What did we do above!?

In the `query(:enter)` we specify the "enter" state of our component and and apply the style to hide the cards.

After that, we select `query(':enter')` again to apply the other styles, with the `stagger` function we specify the time for the animation to start. And in `animation('.8s ease-in')` we specify the transition style of the animation! Inside of the `keyframes()` we specify the css properties to make our animation!

Now we have our animation organized and we can use it in our components!

Now we need to set the animation in the animations property inside the @Component() decorator. As below:

```typescript
import { animatedListCards } from './animations/animations';

@Component({ 
 ...
 animations: [
   animatedListCards // the animation trigger
 ]
})
``` 

And after that, we trigger the animation with the length of our data, for example an array of courses:

```html
<div [@listAnimation]="courses.length">
  <ng-container *ngFor="let course of courses">
    <div class="card">
      <h1>
        {{ this.course.name }}
      </h1>
    </div>
  </ng-container>
</div>
```

And finally we have the our animation making the page and user experience more pleasant!

Here, we have an example application available as a [live example](https://stackblitz.com/edit/angular-card-animation?file=src/app/app.component.ts):

{% embed https://stackblitz.com/edit/angular-card-animation?embed=1&file=src/app/animations/animations.ts %}

Thanks for reading!!!