Angular Animation Using stagger from a query with custom delay

I'm using an Angular 15 animation to handle the showing of images on a page.

transition(':enter', [
query('.chat', [
style({ opacity: 0, transform: 'translateY(30px)' }),
stagger('0.75s', [
animate('250ms', style({ opacity: 1 , transform: 'translateY(0)' }))
])
])
])


This works fine, I have a div with child images assigned a class "chat".

<div *ngIf="isVisible" @fadeSlideInOutStagger >
<img class="chat" src="/chat1.webp"/>
<img class="chat" src="/chat2.webp"/>
<img class="chat" src="/chat3.webp"/>
</div>


But I want to introduce a delay between the child elements. I want the second image to have twice as long of a delay as the first and the last half as long. at the moment there is a fixed delay as defined in the stagger param.

Can this be done. I don't seem to have access to the indivdual child element as the effect is handled by the parent div.

Does anyone have experience getting this to work?

Continue reading...