title: Trigger ngFor Animation on Scroll Angular 6
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>How can I hold the items animation until the window is on certain Y position?</p>
  
  <pre><code>trigger('fadeListAnimation', [
    transition('* =&gt; *', [
      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 }
      )
    ])
  ]);
  </code></pre>
  
  <p>Thank you in advance!</p>