Waypoints js not working as expected

Question

I am working on a website with one-page scroll layout. I am using the jquery.onepage-scroll.js library for the layout. And i want to add animations while the different sections are scrolled. I tried using the waypoints library to achieve the same but the problem is that the events are not firing when i scroll the page, rather when i click "Inspect element" in the Chrome, only then the event associated with waypoints(in my case, the event is alert message) gets fired. I am not able to figure out the exact problem here.

Here is how my webpage is structured:

<div class="main">
<section id="page1"></section>
<section id="page2"></section>
<section id="page3"></section>
</div>

And here is how i have associated an alert to the waypoint function just to check if it works:

$("section#page2").waypoint(function(){
            alert('waypoint ok');
        });

Answer 1

I think there are conflicts between Waypoint and jquery.onepage-scroll.js Plugin. If I were you I would switch to a plugin that has more option, I've used FullPage.js

there are way more options and you can do anything you want like this where you can add custom animations.

you can use afterSlideLoad to do whatever you want once you slide to a cetain page

afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex){

        //first slide of the second section
        if(anchorLink == 'secondPage' && slideIndex == 1){
            alert("First slide loaded");
        }

        //second slide of the second section (supposing #secondSlide is the
        //anchor for the second slide
        if(index == 2 && slideIndex == 'secondSlide'){
            alert("Second slide loaded");
        }

Hope that helps.

Answer 2

        <h1 class="animated" data-animation="fadeInDown" data-revert="fadeOutDown">Some Animation Here</h1>

You can get animation while he tag visible in window. You can check animation effect in animate.css.

here is jsfiffle demo