How to prevent JavaScript animation occurring strange vibration

Question

The code below is what I currently trying to make. As the result you can see just a bunch of buttons, I want to hide the buttons while the user is scrolling. Cause I can't insert code with code snippet :( so I just paste here:

$(function() {
  $(window).on('scroll', function() {
    $('ul.side-sticky-nav').addClass('hide-side-sticky-nav');
    setTimeout(function() {
      $('ul.side-sticky-nav').removeClass('hide-side-sticky-nav');
    }, 150);
  });
});

ul.side-sticky-nav {
  list-style-type: none;
  padding: 0;
  width: 50px;
  margin: 8px;
  position: fixed;
  right: 0;
  bottom: 10%;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

ul.side-sticky-nav li {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border-radius: 100%;
  margin: 8px 0;
  background: blue;
}

.hide-side-sticky-nav {
  right: -40px!important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height: 2000px; background: gray;">
  <ul class="side-sticky-nav">
    <li>
      <a></a>
    </li>
    <li>
      <a></a>
    </li>
  </ul>
</div>

What we should pay attention when using animation with js? Thank you!

in my opinion your code is working fine. I did not see any vibration. — s.kuznetsov, Jul 31 '20 at 04:07

score 0 · Answer 1 · answered Jul 31 '20 at 04:13

This is an easier way to detect stop scrolling event for your case.

$(function() {

  var st = $(window).scrollTop();
  setInterval(function() {
    if (st != $(window).scrollTop()) {
      $('ul.side-sticky-nav').addClass('hide-side-sticky-nav');
    } else {
      $('ul.side-sticky-nav').removeClass('hide-side-sticky-nav');
    }
    st = $(window).scrollTop();
  } ,300);

});

ul.side-sticky-nav {
  list-style-type: none;
  padding: 0;
  width: 50px;
  margin: 8px;
  position: fixed;
  right: 0;
  bottom: 10%;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

ul.side-sticky-nav li {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border-radius: 100%;
  margin: 8px 0;
  background: blue;
}

.hide-side-sticky-nav {
  right: -40px!important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height: 2000px; background: gray;">
  <ul class="side-sticky-nav">
    <li>
      <a></a>
    </li>
    <li>
      <a></a>
    </li>
  </ul>
</div>

kliank · Answer 2 · 2020-07-31T04:36:49.380

Maybe you could apply debounce to it with at_begin in true

$(function() {
 function() toggleNav{
    const nav = $('ul.side-sticky-nav')
    if (nav.hasClass('hide-side-sticky-nav') {
      $('ul.side-sticky-nav').removeClass('hide-side-sticky-nav');
    }
    else {
      $('ul.side-sticky-nav').addClass('hide-side-sticky-nav');
    }
  }

  $(window).on('scroll', debounce(250, true, toggleNav));
});

this will hide the nav right after user start to scroll and won't show it again until 250 ms after it stops scrolling

You could use (at least) one of this to have the debounce function:

http://benalman.com/projects/jquery-throttle-debounce-plugin/ (not maintained)
https://github.com/jashkenas/underscore/commit/9e3e067f5025dbe5e93ed784f93b233882ca0ffe (underscore.js)
Lodash https://lodash.com/docs#debounce (recommended )

Their api is nearly the same

How to prevent JavaScript animation occurring strange vibration

2 Answers2