Trigger ngFor Animation on Scroll Angular 6

Question

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!

Answer 1

I've fixed this by hidding the element until this is visible using *ngIf