ngx-scroll-view - Angular

Ngx scroll view is a Typescript library for easily animating elements as they enter/leave the viewport.

Dependencies

• Angular (requires Angular 13+)

Versions

• Version - 0.0.3 - Basic and custom animations
• Version - 0.1.3 - Pre-animation and pos-animation triggers added

Installation

Install above dependencies via npm, run:

npm install --save ngx-scroll-view

Once installed you need to import the main module:

import {NgxScrollViewModule} from 'ngx-scroll-view';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgxScrollViewModule],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Usage

The library uses only one directive: scrollView.

ScrollView Directive

Use this directive to reveal a single DOM element upon scroll.

Basic Usage

<div class="item" scrollView>..</div>

With Custom Options

You can also pass in a custom configuration object to the directive.

<div class="item" [scrollView]="{delay:'2s', origin:'left'}">..</div>

This will override the default configuration used when revealing this particular element.

When no configuration is passed in, the directive uses the default configuration defined at component or at application level.

Configuration options list:

• delay : "0.5s",
• time : "1s",
• origin : "bottom", - e.g.("top", "bottom", "right", "left")
• distance : "20px",

You can use like css atributes.

Triggers

You can add event listeners like Angular native event listeners, and then you can execute your custom function:

<div
  class="item"
  scrollView
  (beforeView)="yourCustomFunction($event)"
  (afterView)="yourCustomFunction($event)"
>
  ..
</div>

Inside $event parameter, you will have the element that is triggering the listeners.

Credits

ngx-scroll-view - is built by Ruben Santibañez Acosta. Put a :star2: in Github Please!