Initialize script for animations on a scroll in your index.h

I cant seem to get the animations to start when they appear as I am Scrolling. The animations work, the problem is they all fire out at once. I am unclear what the documentation ask to do. I add this script before closing body tag in my 'index.html' file.

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

My animations are in my 'app.component.html file'. They work fine for each of the elements I have animations for, but they do not fire when I scroll to them. They all fire at once, so by the time I actually scroll to them they have already gone off. I cant image I missed a step in the set up because animations work. Just trying to get them to work as I scroll to them like it is shown in the Animation preview on the MDB website for each of the scenery images.

All I have done is set up the project identical to what is found in the set up with Angular CLI and NPM. Im testing the animations with the Angular welcome page. So I have not done anything else but put the classes .animate .wow and .fadeInUp for the Angular Logo. I copied and pasted the welcome page several times over to have the ability to scroll down.

Could it be possible to have more guidance other than "Initialize script for animations on a scroll in your index.html".

Thank you so much. For taking your time to read and help with this little issue I seem to be having. Hopefully I am not the only one.