Animations do not appear

Well, I'm trying to do some animations on scroll, but I do not know why, but I do not see any animation, the sections do not reveal. As I scroll down ...

Html:

I added the js-wp-1, js-wp-3, js-wp-4 class to the elements I wanted to animate.

CSS:

/* ---------------------------------------------- */
/* ANIMATIONS */
/* ---------------------------------------------- */


.js--wp-1,
.js--wp-3,
.js--wp-4{
   opacity: 0;                        
   -webkit-animation-duration: 1s;
   animation-duration: 1s;
}


.js--wp-1.animated,
.js--wp-3.animated,
.js--wp-4.animated{                              
   opacity: 1;
}

JS:

 /*Animations on scroll*/
        /*Animation 1*/
        $('.js--wp-1').waypoint(function(direction) {  /* Waypoint*/
            $('.js--wp-1').addClass('animated fadeIn');  /*Select animationçao*/
        }, {
            offset: '40%'
         });




        /*Animation 3*/
        $('.js--wp-3').waypoint(function(direction) { 
            $('.js--wp-3').addClass('animated fadeIn'); 
        }, {
            offset: '50%'
         });



        /*Animation 4*/
        $('.js--wp-4').waypoint(function(direction) { 
            $('.js--wp-4').addClass('animated fadeIn'); 
        }, {
            offset: '50%'
         });

Thank you guys!

PS: I'm using animate.css to make these animations.