Multi tool use

Trigger ngFor Animation on Scroll Angular 6

I'm basically making an Angular 6 application that olds an array of items and displays them using *ngFor. What I want is to animate then one by one when the window is on certain position (Y offset), this is, begin the animation when the window is on certain Y position.

The following code perfectly makes the animation for each item (show on after another, whit an animation), but is being triggered as soon as the component loads.

How can I hold the items animation until the window is on certain Y position?

trigger('fadeListAnimation', [
transition('* => *', [
query(':enter',
style({ opacity: 0, transform: 'scale(0.9)' }),
{ optional: true }
),

query(':enter',
stagger(150, [
animate('.15s ease-out',
keyframes([
style({ opacity: 0, transform: 'scale(0.9)' }),
style({ opacity: 1, transform: 'scale(1)' })
])
)
]),
{ optional: true }
),

query(':leave',
stagger(150, [
animate('.15s ease-out',
keyframes([
style({ opacity: 1, transform: 'scale(1)' }),
style({ opacity: 0, transform: 'scale(0.9)' })
])
)
]),
{ optional: true }
)
])
]);


Thank you in advance!

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.