Angular animation not working properly

so I’m trying to do a simple invisible-to-visible animation to my ion-cards. I followed the tutorial

Here he did a visible-to-invisible animation on a button click event. I want mine to be initially invisible, then after the page loads, it will be visible.

animation code:

animations: [
    trigger('myvisibility', [
        state('visible', style({
            opacity: 1
        state('invisible', style({
            opacity: 0
        transition('* => *', animate('.5s'))

ngAfterViewInit() code:

visibleState = 'invisible';
ngAfterViewInit() {
    this.visibleState = this.visibleState == 'invisible' ? 'invisible' : 'visible';

My problem is that yes it works, but instead of what I want, it turns from visible-to-invisible instead. What am I doing wrong here?

You need to swap the invisible with visible in your ternary operator.

this.visibleState = this.visibleState == ‘invisible’ ? ‘visible’ : ‘invisible’;

did that and now my cards just pop out immediately, no animation is done

changed my animation to flipInX instead. now works perfectly

We need to see your markup. What trigger are you trying to animate on?

I was trying to animate this:

<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>

Changed my @Component section to this:

selector: 'page-home',
templateUrl: 'home.html',
animations: [
        trigger('flipInX', [transition('* => *', useAnimation(flipInX))])

Then now it works. The cards flip now. But now I want to animate them sequentially instead, since I’ll place them in a list. Like make them flip from top to bottom, from one card to the other.

Check out this article on Medium:

thanks. I’ll check it out