-1
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.