How can I stop a CSS animation on scroll?

Question

I want to show an animating arrow the first time a web page loads, and disable it when the user scrolls.

Normally I could do something like this:

jQuery(window).scroll(function() {
    jQuery('.arrow').css("display", "none");
});

However my site has a few plugins to allow horizontal scrolling which I think is preventing this from working.

Is there a way to hide the animation that is not based on scrolling detection?

http://codepen.io/sol_b/pen/ORGKbP

Thanks.

EDIT: the plugins I'm using are jquery kinetic and jquery mousewheel.

take a look at http://stackoverflow.com/questions/9144560/jquery-scroll-detect-when-user-stops-scrolling — Alexis, Oct 27 '16 at 12:11
Thanks, but not sure how that helps.. I was hoping to avoid anything to do with scroll. — sol, Oct 27 '16 at 12:28

score 2 · Answer 1 · answered Oct 27 '16 at 13:02

You can do the following in your jquery.

jQuery(window).scroll(function() {
    document.getElementById("animation").style.WebkitAnimationPlayState = "paused";
});

This will stop your animation while scrolling, but this will cause an issue that the animation won't be played when the scroll is stopped. Fot that you can use this function

$.fn.scrollStopped = function(callback) {
    var that = this, $this = $(that);
    $this.scroll(function(ev) {
        clearTimeout($this.data('scrollTimeout'));
        $this.data('scrollTimeout', setTimeout(callback.bind(that),250, ev));
    });
};

And then on scroll stop you can start the animation again.

$(window).scrollStopped(function(ev){
    document.getElementById("animation").style.WebkitAnimationPlayState = "running";
});

Thanks. It worked by targeting the wrapper, instead of window. I'm not certain why. — sol, Oct 27 '16 at 13:42

score 1 · Answer 2 · answered Oct 27 '16 at 13:04

1

If the plugin, that allows horizontal scrolling, has an official documentation, you should look for a callback method. Like when the users is scrolling this called gets called. In the callback you could then hide the arrow (or .fadeOut() imo)...

answered Oct 27 '16 at 13:04

Julius

64
5

score 0 · Accepted Answer · answered Oct 27 '16 at 13:41

0

I was able to fix this by replacing 'window' with my content wrapper. Like this:

jQuery('#wrapper').scroll(function() {
    jQuery('.arrow').css("display", "none");
});

answered Oct 27 '16 at 13:41

sol

22,311
6
42
59

How can I stop a CSS animation on scroll?

3 Answers3