animate.css and scrolling based animations with jQuery

Question

I'm using animate.css CSS3 animations and I want them to show up as you scroll down the page. I ran into a problem and cannot figure it out.

I use the following script from a website:

$(window).scroll(function() {
    $('#animatedElement').each(function(){
    var imagePos = $(this).offset().top;

    var topOfWindow = $(window).scrollTop();
        if (imagePos < topOfWindow+400) {
            $(this).addClass("slideUp");
        }
    });
});

I modified it a little bit to this:

$(window).scroll(function() {
    $('.hidden').each(function(){
    var imagePos = $(this).offset().top;

    var topOfWindow = $(window).scrollTop();
        if (imagePos < topOfWindow+400) {
            $(this).removeClass("hidden").addClass("animated");
        }
    });
});

I want to hide the elements until they are in the visible area of the website and I give them a class called "hidden" with opacity: 0 or visibility: hidden.

Even though the script successfully removes the "hidden"-class and adds the "animated"-class, there is no animation going on, the element just appears.

I thought that it has something to do with the css of the "hidden"-class, but even if I define nothing under this class, there are no animations.

If I change the script to add a specific animation-class insted of the "animated"-class, it works, but only without the "hidden"-class.

I hope you understand what I mean, it is quite hard to explain, so I made a fiddle.

http://jsfiddle.net/79MJs/

However, I want the script to work with different animations and not only one like in the fiddle.

I really cannot figure this out, so I really appreciate any help. Thanks!

Sire · Accepted Answer · 2019-04-26 10:57:18Z

2

The behaviour you had was because you gave the '.animated' class from the start, and the animation was terminated before you arrived to the elements.

Please note that you need to modify the html and css code also to use the animation as you want.

Please see the following demo which runs multiple animations.

JS:

var animations = ['animated', 'animated-right'];
var i = 0;
$(window).scroll(function() {
    $elem = $('.hidden:first');
    var imagePos = $elem.offset().top;
    var topOfWindow = $(window).scrollTop();
    if (imagePos < topOfWindow + 400) {
        var animationClass = animations[i % 2 == 0 ? 1 : 0];
        $elem.removeClass("hidden")
             .addClass(animationClass);
        i++;
    }
});

CSS

.hidden { visibility: hidden;}
.vertical-slide {
    border: 1px solid #000;
    height: 500px;
}
.animated,
.animated-right{
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes animated {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  80% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes animated {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  80% {
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

@-webkit-keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
  }

  80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    -ms-transform: translateX(-30px);
    transform: translateX(-30px);
  }

  80% {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translatex(10px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.animated {
  -webkit-animation-name: animated;
  animation-name: animated;
}

.animated-right {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

HTML:

<div class="vertical-slide">
    <article>
        <h1 class="animated">1</h1>
    </article>
</div>
<div class="vertical-slide">
    <article>
        <h1 class="hidden">2</h1>
    </article>
</div>
<div class="vertical-slide">
    <article>
        <h1 class="hidden">3</h1>
    </article>
</div>
<div class="vertical-slide">
    <article>
        <h1 class="hidden">4</h1>
    </article>
</div>
<div class="vertical-slide">
    <article>
        <h1 class="hidden">5</h1>
    </article>
</div>

edited Apr 26, 2019 at 10:57

Sire

4,3984 gold badges42 silver badges79 bronze badges

answered Apr 26, 2014 at 9:49

Mihai Matei

24.3k5 gold badges34 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

paelzer Over a year ago

Hi, thank you for you answer. Your solution is good, but I don't want to be limited to one animation (here: bounceUpIn), maybe I also want to use slideInRight... and so on. Is there a way to specify different animations for each element and iniate them as you scroll?

Mihai Matei Over a year ago

Sure you can.. you just need to define other animations in the css code and to add the proper css animation class when scrolling...

paelzer Over a year ago

I really don't get it. In theory I know what you mean but at the same time I don't. Can you maybe update your demo to include a second type of animation, please? Thanks.

Mihai Matei Over a year ago

I've edited my answer and please follow the demo: jqversion.com/#!/StXI6AL/1

paelzer Over a year ago

Ok, thank you very much. Still, can't I somehow predefine the type of animation within the html (by giving the elements a class based on the animation name) and add the "start signal" through the script since animate.css uses two classes to start an animation ("animate" and "name of animation")?

Collectives™ on Stack Overflow

animate.css and scrolling based animations with jQuery

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related