Animations do not appear

Question

Good people, I’m trying to do some scrolling animations, but I don’t know why but I don’t see any animation, the sections don’t Reveal As I go scrolling...

Html:

I added the js-wp-1, js-wp-3, js-wp-4 class in 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%'
         });

Personal thank you!

PS: I’m using Animate.css to make these animations.

Answer 1

Using the information posted in your question, Animate.css alone has no connection to scroll and I don’t quite understand your attempt to add scroll detection.

However, I have a cool (and easy to implement) alternative to what you’re trying to do using wow.js. That even uses Animate.css to make the animation.

Follow the link: wow js.

Any questions, you can comment.

I hope I’ve helped! :)