{"id":15508356,"url":"https://github.com/tinesoft/ngx-scrollreveal","last_synced_at":"2025-07-29T12:38:04.996Z","repository":{"id":12870453,"uuid":"73012707","full_name":"tinesoft/ngx-scrollreveal","owner":"tinesoft","description":"Angular directives for ScrollReveal : a JavaScript library for easily animating elements as they enter/leave the viewport.","archived":false,"fork":false,"pushed_at":"2023-01-04T15:54:01.000Z","size":5759,"stargazers_count":93,"open_issues_count":73,"forks_count":11,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-07-03T21:11:24.783Z","etag":null,"topics":["angular","animation","hacktoberfest","scroll","scrollreveal"],"latest_commit_sha":null,"homepage":"https://tinesoft.github.io/ngx-scrollreveal","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tinesoft.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"tinesoft","patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"custom":null}},"created_at":"2016-11-06T19:11:05.000Z","updated_at":"2024-03-09T01:54:37.000Z","dependencies_parsed_at":"2023-01-11T20:19:26.777Z","dependency_job_id":null,"html_url":"https://github.com/tinesoft/ngx-scrollreveal","commit_stats":null,"previous_names":["tinesoft/ng-scrollreveal","tinesoft/ng2-scrollreveal"],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/tinesoft/ngx-scrollreveal","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinesoft%2Fngx-scrollreveal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinesoft%2Fngx-scrollreveal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinesoft%2Fngx-scrollreveal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinesoft%2Fngx-scrollreveal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tinesoft","download_url":"https://codeload.github.com/tinesoft/ngx-scrollreveal/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinesoft%2Fngx-scrollreveal/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265528928,"owners_count":23782785,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","animation","hacktoberfest","scroll","scrollreveal"],"created_at":"2024-10-02T09:37:49.185Z","updated_at":"2025-07-16T18:05:09.915Z","avatar_url":"https://github.com/tinesoft.png","language":"JavaScript","funding_links":["https://github.com/sponsors/tinesoft"],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg height=\"256px\" width=\"256px\" style=\"text-align: center;\" src=\"https://cdn.jsdelivr.net/gh/tinesoft/ngx-scrollreveal@master/demo/src/assets/logo.svg\"\u003e\n\u003c/p\u003e\n\n# ngx-scrollreveal - [Angular](http://angular.io/) directives for [ScrollReveal JS](https://scrollrevealjs.org/)\n\n[![npm version](https://badge.fury.io/js/ngx-scrollreveal.svg)](https://badge.fury.io/js/ngx-scrollreveal)\n[![Build Status](https://travis-ci.org/tinesoft/ngx-scrollreveal.svg?branch=master)](https://travis-ci.org/tinesoft/ngx-scrollreveal)\n[![Coverage Status](https://coveralls.io/repos/github/tinesoft/ngx-scrollreveal/badge.svg?branch=master)](https://coveralls.io/github/tinesoft/ngx-scrollreveal?branch=master)\n[![devDependency Status](https://david-dm.org/tinesoft/ngx-scrollreveal/dev-status.svg?branch=master)](https://david-dm.org/tinesoft/ngx-scrollreveal#info=devDependencies)\n[![Greenkeeper Badge](https://badges.greenkeeper.io/tinesoft/ngx-scrollreveal.svg)](https://greenkeeper.io/)\n\nScrollReveal is a JavaScript library for easily animating elements as they enter/leave the viewport.\n\n## Demo\n\nView all the directives in action at https://tinesoft.github.io/ngx-scrollreveal\n\n## Dependencies\n\n* [Angular](https://angular.io) (*requires* Angular 6+, [v2.2.0](https://github.com/tinesoft/ngx-scrollreveal/tree/v2.2.0) is the latest version for Angular \u003c 6 )\n* [ScrollReveal](https://scrollrevealjs.org) (*requires* ScrollReveal 4 or higher, tested with 4.0.2)\n\n## Installation\n\nInstall above dependencies via *npm*. In particular for `ScrollReveal JS`, run:\n\n```shell\nnpm install --save scrollreveal\n```\n\n---\n\n##### Angular-CLI\n\n\u003e**Note**: If you are using `angular-cli` to build your app, make sure that `scrollreveal` is properly listed as a [global library](https://github.com/angular/angular-cli/wiki/stories-global-lib), by editing your `angular.json` as such:\n\n```\n      \"scripts\": [\n        \"../node_modules/scrollreveal/dist/scrollreveal.js\"\n      ],\n```\n\n##### SystemJS\n\n\u003e**Note**:If you are using `SystemJS`, you should adjust your configuration to point to the UMD bundle.\nIn your systemjs config file, `map` needs to tell the System loader where to look for `ngx-scrollreveal`:\n\n```ts\nmap: {\n  'ngx-scrollreveal': 'node_modules/ngx-scrollreveal/bundles/ngx-scrollreveal.min.js',\n}\n```\n\nIn your systemjs config file, `meta` needs to tell the System loader how to load `scrollreveal`:\n\n```ts\n    meta: {\n    './node_modules/scrollreveal/dist/scrollreveal.min.js': {\n            format: 'amd'\n        }\n    }\n```\n\nIn your index.html file, add script tag to load  `scrollreveal` globally:\n\n```html\n    \u003c!-- 1. Configure SystemJS --\u003e\n    \u003cscript src=\"system.config.js\"\u003e\u003c/script\u003e\n    \u003c!-- 2. Add scrollreveal dependency--\u003e\n    \u003cscript src=\"node_modules/scrollreveal/dist/scrollreveal.min.js\"\u003e\u003c/script\u003e\n```\n\n---\n\nNow install `ngx-scrollreveal` via:\n\n```shell\nnpm install --save ngx-scrollreveal\n```\n\nOnce installed you need to import the main module:\n\n```ts\nimport {NgsRevealModule} from 'ngx-scrollreveal';\n```\n\n```ts\nimport {NgsRevealModule} from 'ngx-scrollreveal';\n\n@NgModule({\n  declarations: [AppComponent, ...],\n  imports: [NgsRevealModule],  \n  bootstrap: [AppComponent]\n})\nexport class AppModule {\n}\n```\n\n## Usage\n\nThe library is composed of two main directives: `ngsReveal` and `ngsRevealSet`.\n\n### ngsReveal Directive\n\n---\n\nUse this directive to reveal/hide a **single DOM element** upon scroll.\n\n##### Basic Usage\n\n```html\n    \u003cdiv class=\"item\" ngsReveal\u003e..\u003c/div\u003e\n```\n\n##### With Custom Options\n\nYou can also pass in a custom configuration object to the directive.\n\n```html\n    \u003cdiv class=\"item\" [ngsReveal]=\"{ reset: true}\" \u003e..\u003c/div\u003e\n```\n\nThis will override the default configuration used when revealing this particular element.\nWhen no configuration is passed in, the directive uses the default configuration defined at component or at application level.\n\nConfiguration options are the same as ScrollReveal JS [configuration object](https://scrollrevealjs.org/guide/customization.html).\n\n### ngsRevealSet Directive\n\n---\n\nUse this directive to reveal/hide a **set of DOM elements** upon scroll.\n\n`[ngsSelector]` attribute is required, and defines which child items must be revealed/hidden on scroll.\n\n\u003e**Note:** The value is a list of CSS selectors (comma-separated).\n\n\n#### Basic Usage\n\n```html\n    \u003cdiv class=\"itemset\" ngsRevealSet [ngsSelector]=\"'.item'\"\u003e\n        \u003cdiv class=\"item item1\"\u003eItem 1\u003c/div\u003e\n        \u003cdiv class=\"item item2\"\u003eItem 2\u003c/div\u003e\n        \u003cdiv class=\"item item3\"\u003eItem 3\u003c/div\u003e\n        \u003cdiv class=\"item item4\"\u003eItem 4\u003c/div\u003e\n        \u003cdiv class=\"item5\"\u003eItem 5 (will not be animated)\u003c/div\u003e\n    \u003c/div\u003e\n```\n\n#### With Custom Options\n\n```html\n    \u003cdiv class=\"itemset\" [ngsRevealSet]=\"{ reset:true}\" [ngsSelector]=\"'.item'\"\u003e\n        \u003cdiv class=\"item item1\"\u003eItem 1\u003c/div\u003e\n        \u003cdiv class=\"item item2\"\u003eItem 2\u003c/div\u003e\n        \u003cdiv class=\"item item3\"\u003eItem 3\u003c/div\u003e\n        \u003cdiv class=\"item item4\"\u003eItem 4\u003c/div\u003e\n        \u003cdiv class=\"item5\"\u003eItem 5 (will not be animated)\u003c/div\u003e\n    \u003c/div\u003e\n```\n\nConfiguration options are the same as ScrollReveal JS [configuration object](https://github.com/jlmakes/scrollreveal#2-configuration). \n\n#### Sequentially animated items\n\nChild items inside the parent set can be sequentially animated, by adding the `[ngsRevealInterval]` attribute.\n\n\u003e**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.\n\n```html\n    \u003cdiv class=\"itemset\" [ngsRevealSet]=\"{ reset:true}\" [ngsInterval]=\"50\" [ngsSelector]=\"'.item'\"\u003e\n        \u003cdiv class=\"item item1\"\u003eItem 1\u003c/div\u003e\n        \u003cdiv class=\"item item2\"\u003eItem 2\u003c/div\u003e\n        \u003cdiv class=\"item item3\"\u003eItem 3\u003c/div\u003e\n        \u003cdiv class=\"item item4\"\u003eItem 4\u003c/div\u003e\n        \u003cdiv class=\"item5\"\u003eItem 5 (will not be animated)\u003c/div\u003e\n    \u003c/div\u003e\n\n```\n\n### Global Configuration\n\n---\n\nYou 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.\n\n```ts\nimport {Component} from '@angular/core';\nimport {NgsRevealConfig} from 'ngx-scrollreveal';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.scss'],\n  providers: [NgsRevealConfig] // add NgsRevealConfig to the component providers\n})\nexport class AppComponent {\n  constructor(config: NgsRevealConfig) {\n    // customize default values of ngx-scrollreveal directives used by this component tree\n    config.duration = 5000;\n    config.easing = 'cubic-bezier(0.645, 0.045, 0.355, 1)';\n\n    //other options here\n  }\n}\n```\n\n\n### Subscribing to ScrollReveal events\n\n---\n\nYou can now subscribe to some events triggered by `ScrollReveal` before/after an element is revealed/reset.\n\n```ts\nimport { Component, OnInit, OnDestroy } from '@angular/core';\nimport { NgsRevealService } from 'ngx-scrollreveal';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.scss']\n})\nexport class AppComponent implements OnInit, OnDestroy{\n  constructor(private revealService: NgsRevealService) {\n  }\n  \n  ngOnInit() {\n    // subscribe to ScrollReveal observables to react to main events\n    this.beforeRevealSubscription = this.revealService.beforeReveal$.subscribe(\n      (el: HTMLElement) =\u003e {\n        console.log(`beforeReveal of '\u003c${el.nodeName}\u003e.${el.className}'`);\n      });\n\n    this.afterRevealSubscription = this.revealService.afterReveal$.subscribe(\n      (el: HTMLElement) =\u003e {\n        console.log(`afterReveal of '\u003c${el.nodeName}\u003e.${el.className}'`);\n    });\n\n    this.beforeResetSubscription = this.revealService.beforeReset$.subscribe(\n      (el: HTMLElement) =\u003e {\n        console.log(`beforeReset of '\u003c${el.nodeName}\u003e.${el.className}'`);\n    });\n\n    this.afterResetSubscription = this.revealService.afterReset$.subscribe(\n      (el: HTMLElement) =\u003e {\n        console.log(`afterReset of '\u003c${el.nodeName}\u003e.${el.className}'`);\n    });\n  }\n\n  ngOnDestroy() {\n    // unsubscribe to ScrollReveal observables to prevent memory leaks\n    this.beforeRevealSubscription.unsubscribe();\n    this.afterRevealSubscription.unsubscribe();\n    this.beforeResetSubscription.unsubscribe();\n    this.afterResetSubscription.unsubscribe();\n  }\n}\n\n```\n\n## Credits\n\n`ngx-scrollreveal` is built upon [ScrollReveal JS](https://scrollrevealjs.org) by **Julian Lloyd**. Thanks to him for the great work!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftinesoft%2Fngx-scrollreveal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftinesoft%2Fngx-scrollreveal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftinesoft%2Fngx-scrollreveal/lists"}