How to animate sequentially

Basically I want to animate my ion-cards sequentially, top-to-bottom style, since they are in a list. Right now my cards animate at the same time.

I get my data from my API, code looks like this:

datalength: number;
public information: any;
ionViewDidLoad() {
        .subscribe((data) => {
            this.information = data.announcements;
            this.datalength = data.announcements.length;

this is how my html looks like:

    <ion-item class="getend">
        <ion-card [@flipInX]="flipInX" class="list" *ngFor="let item of information | slice:0:slice; let i=index" text-wrap>
            <ion-card-header text-wrap>
            <ion-card-content style="margin-top: -20px; margin-bottom: -25px;">
                Date posted: {{}}
            <button ion-button clear end style="float: right;" (click)="showDetails(item.title,, item.content)">View</button>

What can I do to animate them, one card after the other?


wow thanks for this. I’ll check it out!