Animaciones activada por el scroll

Instalacion
Lo primero es tener una directiva que lea el evento de scroll

Esta directiva no es mia la encontre en stackOverflow(no he vuelto a encontrar la pregunta pero si el plunker) donde esta toda la info

sino usan angular cli para crear la directiva no olviden agregarla en las declaraciones de app.module

import {
  ElementRef, Output, Directive, AfterViewInit, OnDestroy, EventEmitter
} from '@angular/core';
import {Observable} from 'rxjs/Observable';import {Subscription} from 'rxjs/Subscription';import 'rxjs/add/observable/fromEvent';import 'rxjs/add/operator/startWith';



@Directive({
  selector: '[appear]'
})
export class AppearDirective implements AfterViewInit, OnDestroy {
  @Output()
  appear: EventEmitter<void>;

  elementPos: number;
  elementHeight: number;

  scrollPos: number;
  windowHeight: number;

  subscriptionScroll: Subscription;
  subscriptionResize: Subscription;

  constructor(private element: ElementRef){
    this.appear = new EventEmitter<void>();
  }

  saveDimensions() {
    this.elementPos = this.getOffsetTop(this.element.nativeElement);
    this.elementHeight = this.element.nativeElement.offsetHeight;
    this.windowHeight = window.innerHeight;
  }
  saveScrollPos() {
    this.scrollPos = window.scrollY;
  }
  getOffsetTop(element: any){
    let offsetTop = element.offsetTop || 0;
    if(element.offsetParent){
      offsetTop += this.getOffsetTop(element.offsetParent);
    }
    return offsetTop;
  }
  checkVisibility(){
    if(this.isVisible()){
      // double check dimensions (due to async loaded contents, e.g. images)this.saveDimensions();
      if(this.isVisible()){
        this.unsubscribe();
        this.appear.emit();
      }
    }
  }
  isVisible(){
    returnthis.scrollPos >= this.elementPos || (this.scrollPos + this.windowHeight) >= (this.elementPos + this.elementHeight);
  }

  subscribe(){
    this.subscriptionScroll = Observable.fromEvent(window, 'scroll').startWith(null)
      .subscribe(() => {
        this.saveScrollPos();
        this.checkVisibility();
      });
    this.subscriptionResize = Observable.fromEvent(window, 'resize').startWith(null)
      .subscribe(() => {
        this.saveDimensions();
        this.checkVisibility();
      });
  }
  unsubscribe(){
    if(this.subscriptionScroll){
      this.subscriptionScroll.unsubscribe();
    }
    if(this.subscriptionResize){
      this.subscriptionResize.unsubscribe();
    }
  }

  ngAfterViewInit(){
    this.subscribe();
  }
  ngOnDestroy(){
    this.unsubscribe();
  }
}

Uso

creamos la animacion por ejemplo:

import { Component, OnInit } from '@angular/core';
import {  trigger, state, style, transition, animate, keyframes  } from '@angular/animations';

@Component({
  ...
  animations:[
    trigger('menuOp',[
      state('inactive', style({
        opacity: "0"
      })),
      state('active', style({
        opacity: "1"
      })),
      transition('inactive <=> active', animate('0.8s ease-in'))
    ])
  ]
})

ahora en el html y en el ts del componente colocamos la animacion, la directiva y una funcion que va a activar la animacion sobre el elemento a animar

<div [@menuOp]='state4' (appear)="onAppear4()" class="home--contentText"></div>onAppear(){
    this.state = (this.state === 'inactive' ? 'active' : 'inactive');
  }

y ya con eso tenemos una animacion activada por el scroll

este es un repositorio que encontre recientemente puede que tambien funcione https://github.com/abhazelton/animate-on-scroll (aun no lo he probado)

para saber como hacer un sweet Scroll hice tambien este tutorial https://platzi.com/mean/tutoriales/crear-un-sweet-scroll/