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.


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 () {
  stopBouncing = window.setTimeout(function () {
  }, 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.