How to apply zoom animation for each element of a list in angular

Question

I'm using ngfor to get the elements in an array. I want to apply zoom animation for each of the element. For example the first element should zoom in and after a while should zoom out then the second element should zoom in and zoom out like wise the rest

Answer 1

To create a sequential zoom-in and zoom-out animation for each element rendered using *ngFor in Angular, you can define a custom animation using Angular’s animation module. First, create a zoom animation trigger with two states: inactive (normal scale and faded) and active (scaled up and fully visible), and set transitions between them. In your component, maintain an activeIndex to track which element should be zooming. Use setInterval to update the activeIndex every few seconds and a setTimeout to reset it back to inactive after a short delay, creating a zoom-in then zoom-out effect. In your template, apply the animation to each element using [@zoom]="activeIndex === i ? 'active' : 'inactive'" inside the *ngFor loop. This way, each item zooms in and out in sequence, giving a smooth animated presentation.

To know more about Angular, It's recommended to join Angular JS Ceritification today.