Angular directives for ScrollReveal JS
ngx-scrollreveal -ScrollReveal is a JavaScript library for easily animating elements as they enter/leave the viewport.
Demo
View all the directives in action at https://tinesoft.github.io/ngx-scrollreveal
Dependencies
- Angular (requires Angular 6+, v2.2.0 is the latest version for Angular < 6 )
- ScrollReveal (requires ScrollReveal 4 or higher, tested with 4.0.2)
Installation
Install above dependencies via npm. In particular for ScrollReveal JS
, run:
npm install --save scrollreveal
Angular-CLI
Note: If you are using
angular-cli
to build your app, make sure thatscrollreveal
is properly listed as a global library, by editing yourangular.json
as such:
"scripts": [
"../node_modules/scrollreveal/dist/scrollreveal.js"
],
SystemJS
Note:If you are using
SystemJS
, you should adjust your configuration to point to the UMD bundle. In your systemjs config file,map
needs to tell the System loader where to look forngx-scrollreveal
:
map:
In your systemjs config file, meta
needs to tell the System loader how to load scrollreveal
:
meta:
In your index.html file, add script tag to load scrollreveal
globally:
<!-- 1. Configure SystemJS --> <!-- 2. Add scrollreveal dependency-->
Now install ngx-scrollreveal
via:
npm install --save ngx-scrollreveal
Once installed you need to import the main module:
;
;
Usage
The library is composed of two main directives: ngsReveal
and ngsRevealSet
.
ngsReveal Directive
Use this directive to reveal/hide a single DOM element upon scroll.
Basic Usage
..
With Custom Options
You can also pass in a custom configuration object to the directive.
..
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 are the same as ScrollReveal JS configuration object.
ngsRevealSet Directive
Use this directive to reveal/hide a set of DOM elements upon scroll.
[ngsSelector]
attribute is required, and defines which child items must be revealed/hidden on scroll.
Note: The value is a list of CSS selectors (comma-separated).
Basic Usage
Item 1 Item 2 Item 3 Item 4 Item 5 (will not be animated)
With Custom Options
Item 1 Item 2 Item 3 Item 4 Item 5 (will not be animated)
Configuration options are the same as ScrollReveal JS configuration object.
Sequentially animated items
Child items inside the parent set can be sequentially animated, by adding the [ngsRevealInterval]
attribute.
Note: The interval is the time until the next element in the sequence begins its reveal, which is separate from the time until the element’s animation completes. In this example, the sequence interval is 50 milliseconds.
Item 1 Item 2 Item 3 Item 4 Item 5 (will not be animated)
Global Configuration
You can inject the config service, typically in your root component, and customize the values of its properties in order to provide default values for all the ng-reveal directives used in the application.
;;
Subscribing to ScrollReveal events
You can now subscribe to some events triggered by ScrollReveal
before/after an element is revealed/reset.
;;
Credits
ngx-scrollreveal
is built upon ScrollReveal JS by Julian Lloyd. Thanks to him for the great work!