scroll-out.js code example

Example: scrollout js angular

//Install via npm
$ npm i scroll-out -S

//in your component.ts
import ScrollOut from 'scroll-out';

@Component(/**/)
export class MyComponent implements AfterContentInit, OnDestroy {
  so: any;

  constructor(private el: ElementRef) {}

  ngAfterContentInit() {
    this.so = ScrollOut({
      scope: this.el.nativeElement
    });
  }

  ngOnDestroy() {
    this.so.teardown();
  }
}

//In your component.css
[data-scroll] {
  transition: opacity 1s;
}
[data-scroll="in"] {
  opacity: 1;
}
[data-scroll="out"] {
  opacity: 0;
}

//In your component.html
<div data-scroll>Watch me fading in!</div>