I want to have an animation happen only once in an angular app i am building. So upon first time loading the page animate once. If the person goes to another page(route) within the app and comes back to this initial page, the animation should not happen again

@Component({
  selector: 'app-front-blocks',
  templateUrl: './front-blocks.component.html',
  styleUrls: ['./front-blocks.component.scss'],
  animations: [

    // Trigger animation cards array
    trigger('cardAnimation', [
      // Transition from any state to any state
      transition('* => *', [
        // Initially the all cards are not visible
        query(':enter', style({ opacity: 0 }), { optional: true }),

        // Each card will appear sequentially with the delay of 300ms
        query(':enter', stagger('400ms', [
          animate('0.8s 4.6s ease', keyframes([
            style({ opacity: 0, transform: 'translateY(40px)', offset: 0 }),
            style({ opacity: .5, transform: 'translateY(20px) scale(1)', offset: 0.3 }),
            style({ opacity: 1, transform: 'translateY(0)', offset: 1 }),
          ]))]), { optional: true }),

      ]),
    ]),
  ]
})

html:

<div class="block">
<div class="block-container" [@cardAnimation]="blocks.length">
<div id="block-whole" class="block-whole" *ngFor="let block of blocks" routerLink="/{{ block.link }}"  >
    <div id="block-whole-first" class="block-whole-first" >
        <img class="image-small" src="{{ block.img }}" alt="">
        <img class="image-groot" src="{{ block.imgGroot }}" alt="">
    </div>
    <div id="block-whole-second" class="block-whole-second">
        <h4>{{ block.title }}</h4>
        <img src="assets/arrow-btn-large-right.svg" alt="">
    </div>
</div>
</div>
<!-- <ng-lottie class="lottie" [options]="options" (animationCreated)="animationCreated($event)"></ng-lottie> -->
</div>