ngx-scroll-view v1.0.0
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!