1//Install via npm
2$ npm i scroll-out -S
3
4//in your component.ts
5import ScrollOut from 'scroll-out';
6
7@Component(/**/)
8export class MyComponent implements AfterContentInit, OnDestroy {
9  so: any;
10
11  constructor(private el: ElementRef) {}
12
13  ngAfterContentInit() {
14    this.so = ScrollOut({
15      scope: this.el.nativeElement
16    });
17  }
18
19  ngOnDestroy() {
20    this.so.teardown();
21  }
22}
23
24//In your component.css
25[data-scroll] {
26  transition: opacity 1s;
27}
28[data-scroll="in"] {
29  opacity: 1;
30}
31[data-scroll="out"] {
32  opacity: 0;
33}
34
35//In your component.html
36<div data-scroll>Watch me fading in!</div>