jquery addclass and hasclass with animate.css

Question

I am trying to use addclass and hasclass to add animate.css animation to the division class.

<section class="main active">
 ...
</section>
<section class="aboutus">
    <h1>About Us</h1>
    <p class="aboutus-text">
    Text
    </p>
</section>

The above is the HTML code that I am trying to animate.

So when scrolled to aboutus section, active will be removed from main and added to aboutus section.

I tried using this to detect and add animation when active exist in aboutus section.

if($("section.aboutus").hasClass('active')) {
    $(".aboutus-text").addClass("animated fadeIn");
};

It is not working. I tried to see if addClass is working properly by removing the if statement, 'animated fadeIn' is added to aboutus-text.

Anyone can tell me how do I do this? Because I only want the animation to start when aboutus is active.

Answer 1

The plugin has an afterMove() callback, you need to use it

$(".main").onepage_scroll({
    easing: "ease",
    animationTime: 1000,
    afterMove: function () {
        if ($("section.aboutus").hasClass('active')) {
            $(".aboutus-text").addClass("animated fadeIn");
            $("section.aboutus").css({
                'display': 'block'
            });
        };
    }
});