ngx-wow - Angular module for WOW.js.
Demo
View all the directives in action at https://tinesoft.github.io/ngx-wow
Dependencies
- Angular (requires Angular 6+(tested with
v6.1.9
), v1.0.2 is the latest version for Angular < 6 ) - WOW JS (requires WOW JS 1.1 or higher, tested with 1.1.3)
Installation
Install above dependencies via npm. In particular for WOW JS
, run:
npm install --save wowjs
Angular-CLI
Note: If you are using
angular-cli
to build your app, make sure thatwowjs
is properly listed as a global library, by editing yourangular-cli.json
as such:
"scripts": [
"../node_modules/wowjs/dist/wow.js"
],
Also make sure that Animate.css is listed as global style, by either:
- editing
angular-cli.json
as such:
"styles": [
"../node_modules/animate.css/animate.css"
],
- or by importing in your main
styles.scss
(orstyles.sass
,styles.less
,styles.styl
) file as such:
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-wow
:
map: 'ngx-wow': 'node_modules/ngx-wow/bundles/ngx-wow.min.js'
In your systemjs config file, meta
needs to tell the System loader how to load wowjs
:
meta: './node_modules/wowjs/dist/wow.min.js': format: 'amd'
In your index.html file, add script tag to load wowjs
globally:
<!-- 1. Configure SystemJS --> <!-- 2. Add WOW dependency-->
And add a reference to the Animate.css
in the head section:
Now install ngx-wow
via:
npm install --save ngx-wow
Once installed you need to import the main module:
;
;
Usage
Once 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.
Here is how it works:
;;;;
See WOW.js Documentation to see more about how to customize animation settings.
Credits
ngx-wow
is built upon WOW.js, created by Matthieu Aussaguel
License
Copyright (c) 2018 Tine Kondo. Licensed under the MIT License (MIT)