Adding different CSS animations on scroll up and scroll down with jQuery

Question

I'm trying to add classes when the user scrolls up and down in order to show 2 css animations.

It works well if I'm only using the scroll down animation, but its inconsistent when I use both the scroll up and scroll down animations.

I'm having problems getting animations to fire multiple times in a row. As in- scroll down pause, scroll down pause, scroll up pause, scroll up pause.

Here's a jsFiddle to better demonstrate the problem.

and the code-

(function () {
    var previousScroll = 0;

    $(window).scroll(function () {
        var currentScroll = $(this).scrollTop();
        if (currentScroll > previousScroll) {
            //down scroll code
            $("#repel").removeClass("climb");
            $("#repel").addClass("repel").delay(1150).queue(function (next) {
                $(this).removeClass("repel");
                next();
            });
        } else {
            // upscroll code
            $("#repel").removeClass("repel");
            $("#repel").addClass("climb").delay(1000).queue(function (next) {
                $(this).removeClass("climb");
                next();
            });
        }
        previousScroll = currentScroll;
    });
}());

I looked at the jsFiddle but couldn't figure out what you mean with getting animations to fire multiple times. I don't really see any animation in the jsFiddle? — Jean-Paul
– Jean-Paul, Commented Jul 3, 2013 at 17:50
@Jean-Paul sorry I didn't add browser prefixes, the animations are visible in FF at the moment I'll add -webkit- shortly — apaul
– apaul, Commented Jul 3, 2013 at 17:52
Allright, I'll open up my FF then. I'll look into your problem later this evening. — Jean-Paul
– Jean-Paul, Commented Jul 3, 2013 at 17:53

apaul · Accepted Answer · 2013-07-03 18:40:56Z

I figured it out...

I just needed to change the way the animations were being removed. Rather than using a delay and queue I detected the animation end and removed it that way.

Working Example

(function () {
    var previousScroll = 0;

    $(window).scroll(function () {
        var currentScroll = $(this).scrollTop();
        if (currentScroll > previousScroll) {
            //down scroll code
            $("#repel").addClass("repel");
            $("#repel").on('animationend webkitAnimationEnd oanimationend MSAnimationEnd', function () {
                $('#repel').removeClass('repel');
            });

        } else {
            // upscroll code
            $("#repel").addClass("climb");
            $("#repel").on('animationend webkitAnimationEnd oanimationend MSAnimationEnd', function () {
                $('#repel').removeClass('climb');
            });
        }
        previousScroll = currentScroll;
    });
}());

Collectives™ on Stack Overflow

Adding different CSS animations on scroll up and scroll down with jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related