0

How do I implement the WOW library in an angular 2 app which displays many components, one after the other, for animating those components on scroll? Where should I initialize the WOW() instance exactly?

zarak
  • 2,933
  • 3
  • 23
  • 29
Hamza
  • 29
  • 10

2 Answers2

0

In your index file just include these two link and an script.

<link rel="stylesheet" href=" https://cdn.jsdelivr.net/animatecss/3.5.1/animate.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>

Initialize wow() in your index file inside the body tag and add this script

<script>
      new WOW().init();
</script>

now use this as:

<div class="wow bounceInUp">
   Content to Reveal Here
 </div>

you can refer to this link for more info: https://github.com/matthieua/WOW/issues/46

Shailesh kala
  • 1,618
  • 18
  • 16
  • thanks for your help but I have already tried this and it seems not working, the problem is that when I launch the application all the animations start in all the components not when I am scrolling down – Hamza Sep 07 '16 at 08:13
  • WOW.js will only show animation one time on scrolling, you have to include a certain event for initializing WOW.js again or you can use the scrollspy plugin which will detect which element is out off view and then push WOW. – Shailesh kala Sep 07 '16 at 10:35
0
import {WOW} from '../../assets/js/wow.min';
...
ngAfterViewInit() {
        console.timeEnd("ngOnViewInit");
        if(this.isBrowser) {
            new WOW().init();
        }
    }
dimson d
  • 1,488
  • 1
  • 13
  • 14
  • 2
    While this code snippet may be the solution, [including an explanation](//meta.stackexchange.com/questions/114762/explaining-entirely-‌​code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – Adam Apr 13 '17 at 15:18