Jquery - button bounce when scroll up & down

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.

https://codepen.io/nazrinnoorzan/pen/GXzKwm

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.

1 Like

Thank you! You’re a genius!

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.