{"id":15508345,"url":"https://github.com/tinesoft/ngx-wow","last_synced_at":"2025-04-13T02:19:47.508Z","repository":{"id":26133670,"uuid":"107433074","full_name":"tinesoft/ngx-wow","owner":"tinesoft","description":"Angular module for WOW.js: a customizable library to reveal animations when you scroll.","archived":false,"fork":false,"pushed_at":"2023-01-04T14:46:51.000Z","size":6310,"stargazers_count":32,"open_issues_count":44,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-13T02:13:28.566Z","etag":null,"topics":["angular","animate-css","animations","wow"],"latest_commit_sha":null,"homepage":"https://tinesoft.github.io/ngx-wow","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":"2017-10-18T16:18:11.000Z","updated_at":"2023-09-03T12:53:39.000Z","dependencies_parsed_at":"2023-01-14T04:05:33.002Z","dependency_job_id":null,"html_url":"https://github.com/tinesoft/ngx-wow","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinesoft%2Fngx-wow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinesoft%2Fngx-wow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinesoft%2Fngx-wow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinesoft%2Fngx-wow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tinesoft","download_url":"https://codeload.github.com/tinesoft/ngx-wow/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248654095,"owners_count":21140236,"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","animate-css","animations","wow"],"created_at":"2024-10-02T09:37:43.214Z","updated_at":"2025-04-13T02:19:47.489Z","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-wow@master/demo/src/assets/logo.svg\"\u003e\n\u003c/p\u003e\n\n# ngx-wow - Angular module for WOW.js.\n\n[![npm version](https://badge.fury.io/js/ngx-wow.svg)](https://badge.fury.io/js/ngx-wow)\n[![Build Status](https://travis-ci.org/tinesoft/ngx-wow.svg?branch=master)](https://travis-ci.org/tinesoft/ngx-wow)\n[![Coverage Status](https://coveralls.io/repos/github/tinesoft/ngx-wow/badge.svg?branch=master)](https://coveralls.io/github/tinesoft/ngx-wow?branch=master)\n[![dependency Status](https://david-dm.org/tinesoft/ngx-wow/status.svg)](https://david-dm.org/tinesoft/ngx-wow)\n[![devDependency Status](https://david-dm.org/tinesoft/ngx-wow/dev-status.svg?branch=master)](https://david-dm.org/tinesoft/ngx-wow#info=devDependencies)\n[![Greenkeeper Badge](https://badges.greenkeeper.io/tinesoft/ngx-wow.svg)](https://greenkeeper.io/)\n\n## Demo\n\nView all the directives in action at https://tinesoft.github.io/ngx-wow\n\n## Dependencies\n\n* [Angular](https://angular.io) (*requires* Angular 6+(tested with `v6.1.9`), [v1.0.2](https://github.com/tinesoft/ngx-wow/tree/v1.0.2) is the latest version for Angular \u003c 6 )\n* [WOW JS](http://mynameismatthieu.com/WOW/) (*requires* WOW JS 1.1 or higher, tested with 1.1.3)\n\n\n## Installation\n\nInstall above dependencies via *npm*. In particular for `WOW JS`, run:\n```shell\nnpm install --save wowjs\n```\n\n---\n##### Angular-CLI\n\n\u003e**Note**: If you are using `angular-cli` to build your app, make sure that `wowjs` is properly listed as a [global library](https://github.com/angular/angular-cli#global-library-installation), by editing your `angular-cli.json` as such:\n```\n      \"scripts\": [\n        \"../node_modules/wowjs/dist/wow.js\"\n      ],\n```\n\nAlso make sure that [Animate.css](which is already installed and used internally by `wowjs` to actually animate items) is listed as [global style](https://github.com/angular/angular-cli/wiki/stories-global-styles), by either:\n\n* editing `angular-cli.json` as such:\n```\n      \"styles\": [\n        \"../node_modules/animate.css/animate.css\"\n      ],\n```\n* or by importing in your main `styles.scss` (or `styles.sass`, `styles.less`, `styles.styl`) file as such:\n```sass\n...\n@import \"~animate.css/animate.css\";\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-wow`:\n\n```js\nmap: {\n  'ngx-wow': 'node_modules/ngx-wow/bundles/ngx-wow.min.js',\n}\n```\n\nIn your systemjs config file, `meta` needs to tell the System loader how to load `wowjs`:\n\n```js\n    meta: {\n    './node_modules/wowjs/dist/wow.min.js': {\n            format: 'amd'\n        }\n    }\n```\nIn your index.html file, add script tag to load  `wowjs` globally:\n```html\n    \u003c!-- 1. Configure SystemJS --\u003e\n    \u003cscript src=\"system.config.js\"\u003e\u003c/script\u003e\n    \u003c!-- 2. Add WOW dependency--\u003e\n    \u003cscript src=\"node_modules/wowjs/dist/wow.min.js\"\u003e\u003c/script\u003e\n```\n\nAnd add a reference to the `Animate.css` in the head section:\n```html\n\u003chead\u003e\n  \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"node_modules/animate.css/animate.min.css\"\u003e\n\u003c/head\u003e\n```\n\n---\n\nNow install `ngx-wow` via:\n```shell\nnpm install --save ngx-wow\n```\n\nOnce installed you need to import the main module:\n```ts\nimport { NgwWowModule } from 'ngx-wow';\n```\n\n```ts\nimport { NgwWowModule } from 'ngx-wow';\n\n@NgModule({\n  declarations: [AppComponent, ...],\n  imports: [NgwWowModule, ...],  \n  bootstrap: [AppComponent]\n})\nexport class AppModule {\n}\n```\n\n\n## Usage\n\nOnce the module is imported, you can use the `NgwWowService` in your component (i.e. `AppComponent`) to trigger reveal animation by calling `init()` or to be notified by WOW when an element is revealed.\n\nHere is how it works:\n\n```ts\nimport { Component, OnInit, OnDestroy } from '@angular/core';\nimport { Router, NavigationEnd } from '@angular/router';\nimport { NgwWowService } from 'ngx-wow';\nimport { Subscription }   from 'rxjs/Subscription';\nimport { filter } from 'rxjs/operators'\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\n  // keep refs to subscription to be abble to unsubscribe later\n  // (NOTE: unless you want to be notified when an item is revealed by WOW,\n  //  you absolutely don't need this line and related, for the library to work\n  // only the call to `this.wowService.init()` at some point is necessary\n  private wowSubscription: Subscription;\n\n  constructor(private router: Router, private wowService: NgwWowService){\n    this.router.events.pipe(\n        filter(event =\u003e event instanceof NavigationEnd)\n      ).subscribe(event =\u003e {\n        // Reload WoW animations when done navigating to page,\n        // but you are free to call it whenever/wherever you like\n        this.wowService.init();\n      });\n  \n  }\n\n  ngOnInit() {\n    // you can subscribe to WOW observable to react when an element is revealed\n    this.wowSubscription = this.wowService.itemRevealed$.subscribe(\n      (item:HTMLElement) =\u003e {\n        // do whatever you want with revealed element\n      });\n  }\n\n  ngOnDestroy() {\n    // unsubscribe (if necessary) to WOW observable to prevent memory leaks\n    this.wowSubscription.unsubscribe();\n  }\n}\n\n```\n\nSee [WOW.js Documentation](https://github.com/matthieua/WOW#advanced-usage) to see more about how to customize animation settings.\n\n## Credits\n\n`ngx-wow` is built upon [WOW.js](http://mynameismatthieu.com/WOW/), created by [Matthieu Aussaguel](http://mynameismatthieu.com/)\n\n## License\n\nCopyright (c) 2018 Tine Kondo. Licensed under the MIT License (MIT)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftinesoft%2Fngx-wow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftinesoft%2Fngx-wow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftinesoft%2Fngx-wow/lists"}