Jquery - button bounce when scroll up & down

[nzrink1]

Based on that codepen, I managed to make the button bounce when the user scroll up and down.

But, how to make the button bounce if the user scroll up/down twice in a row? Basically what I’m trying to achieve is to make the button keep bouncing until the user stop scrolling.

[m3g4p0p]

@nzrink1

Basically what I’m trying to achieve is to make the button keep bouncing until the user stop scrolling.

In the CSS, set the animation count to infinite:

.animated {
  animation: bounce .4s infinite;
}

And in the JS, apply that class whenever a scroll event occurs, and set a timeout to remove the class again after a given period of time; but also clear that timeout for every new scroll event:

var $bounce = $('.bounce')
var stopBouncing

$(window).scroll(function () {
  $bounce.addClass('animated')
  window.clearTimeout(stopBouncing)
  
  stopBouncing = window.setTimeout(function () {
    $bounce.removeClass('animated')
  }, 1000)
})

This way the element will keep bouncing until the user stopped scrolling for 1s.

[nzrink1]

Thank you! You’re a genius!