Skip to content

Commit e0ed09d

Browse files
committed
fix(animate.css): update documentation about the necessary setup of animate.css
1 parent e449683 commit e0ed09d

File tree

1 file changed

+30
-5
lines changed

1 file changed

+30
-5
lines changed

README.md

Lines changed: 30 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,21 @@ npm install --save wowjs
3535
],
3636
```
3737

38+
Also 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:
39+
40+
* editing `angular-cli.json` as such:
41+
```
42+
"styles": [
43+
"../node_modules/animated.css/animate.css"
44+
],
45+
```
46+
* or by importing in your main `styles.scss` (or `styles.sass`, `styles.less`, `styles.styl`) file as such:
47+
```sass
48+
...
49+
@import "~animate.css/animate.css";
50+
...
51+
```
52+
3853
##### SystemJS
3954
>**Note**:If you are using `SystemJS`, you should adjust your configuration to point to the UMD bundle.
4055
In your systemjs config file, `map` needs to tell the System loader where to look for `ngx-wow`:
@@ -46,7 +61,7 @@ map: {
4661
In your systemjs config file, `meta` needs to tell the System loader how to load `wowjs`:
4762
```js
4863
meta: {
49-
'./node_modules/wowjs/dist/wow.js': {
64+
'./node_modules/wowjs/dist/wow.min.js': {
5065
format: 'amd'
5166
}
5267
}
@@ -56,7 +71,14 @@ In your index.html file, add script tag to load `wowjs` globally:
5671
<!-- 1. Configure SystemJS -->
5772
<script src="system.config.js"></script>
5873
<!-- 2. Add WOW dependency-->
59-
<script src="node_modules/wowjs/dist/wow.js"></script>
74+
<script src="node_modules/wowjs/dist/wow.min.js"></script>
75+
```
76+
77+
And add a reference to the `Animate.css` in the head section:
78+
```html
79+
<head>
80+
<link rel="stylesheet" type="text/css" href="node_modules/animate.css/animate.min.css">
81+
</head>
6082
```
6183

6284
---
@@ -115,7 +137,10 @@ import { Subscription } from 'rxjs/Subscription';
115137
})
116138
export class AppComponent implements OnInit, OnDestroy {
117139

118-
//keep refs to subscription to be abble to unsubscribe later
140+
// keep refs to subscription to be abble to unsubscribe later
141+
// (NOTE: unless you want to be notified when an item is revealed by WOW,
142+
// you absolutely don't need this line and related, for the library to work
143+
// only the call to `this.wowService.init()` at some point is necessary
119144
private wowSubscription: Subscription;
120145

121146
constructor(private router: Router, private wowService: NgwWowService){
@@ -128,15 +153,15 @@ export class AppComponent implements OnInit, OnDestroy {
128153
}
129154

130155
ngOnInit() {
131-
// subscribe to WOW observable to react when an element is revealed
156+
// you can subscribe to WOW observable to react when an element is revealed
132157
this.wowSubscription = this.wowService.itemRevealed$.subscribe(
133158
(item:HTMLElement) => {
134159
// do whatever you want with revealed element
135160
});
136161
}
137162

138163
ngOnDestroy() {
139-
// unsubscribe to WOW observables to prevent memory leaks
164+
// unsubscribe (if necessary) to WOW observable to prevent memory leaks
140165
this.wowSubscription.unsubscribe();
141166
}
142167
}

0 commit comments

Comments
 (0)