Angular-scroll-animations NPM

Angular Scroll Animations Library

This library implements element animations that are triggered by or control user scroll.

Features

Animate on scroll: Simple directive that adds a class (CSS animation) to an element
Scroll to section: Service that smooth scrolls the user to an element of the website based on the element's HTML id

Demo

Demo Application

Installation

$ npm install angular-scroll-animations

Add the following to you module (app.module.ts)

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
...
...
import { AppComponent } from './app.component';

// Import Angular Scroll Animations Module
import { AngularScrollAnimationsModule } from "angular-scroll-animations";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // Add module to imports list
    AngularScrollAnimationsModule
  ],
  providers: [...]
})
export class AppModule { }

Usage Instructions

Animation trigger on scroll:

In template (.html):

<div animateOnScroll startAnimation="faded-out" endAnimation="released" [scrollOffset]="50" [timeOffset]="10">

Add animateOnScroll directive attribute to enable functionality (required)
startAnimation attribute is the CSS class name of the prior state (required)
endAnimation attribute is the CSS class name of the final state after animation (required)
scrollOffset attribute is the offset from the intersection between the bottom of the screen and the element start
timeOffset attribute is the time delay after hitting intersection point

Animate scroll to section:

In template (.html):

<button (click)="scrollToSection(1)">Scroll To Section 1</button>
<section id="sec-1">
</section>

In typescript (.ts)

constructor(private scrollControl: ScrollControlService) {}

ngOnInit(): void {
  // Initialize polyfill
  this.scrollControl.scrollToSectionPolyInit();
}

public scrollToSection(n: number): void {
  this.scrollControl.scrollToElement("sec-" + n);
}

Add a native id attribute to any element (required)
Use dependency injection to inject the ScrollControlService into the component (required)
Create a method that calls the scrollToElement method on the service (required)
- The scrollToElement method takes a string argument of the HTML id of the element to scroll to
Initialize lazy-loaded polyfills for smooth scrolling behavior in ngOnInit(). Reference above code.
- This polyfill is optional, but can be lazy loaded to support older browsers and Safari