jQuery vertical div slider
I don't see anything wrong with the smoothness of the animation.  However, I would simplify the code by introducing another container inside the .slide-item-wrapper; that whole container moves up, so that you don't have to animate each .box-item separately.  Furthermore, I would eliminate the special case for rewinding the animation to its original position.



var offset = 0;
var count = $(".slide-item-wrapper &gt; * &gt; *").length;
window.setInterval(
  function() {
    offset = (offset - 104) % (count * 104); // 104px div height (incl margin)
    $(".slide-item-wrapper &gt; *").css({
      "transform": "translateY(" + offset + "px)",
    });
  }, 3000);
body {
  margin: 100px
}

.slide-item-wrapper {
  width: 300px;
  height: 84px;
  overflow: hidden;
}

.slide-item-wrapper &gt; * {
  transition: .5s ease-in-out;
}

.box-item {
  display: flex;
  justify-content: center;
  align-items: center;
  background: red;
  color: white;
  width: 300px;
  height: 84px;
  margin-bottom: 20px;
}
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="slide-item-wrapper"&gt;
  &lt;div&gt;
    &lt;div class="box-item"&gt;
      Lipsum
    &lt;/div&gt;
     &lt;div class="box-item"&gt;
      Lipsum2
    &lt;/div&gt;
     &lt;div class="box-item"&gt;
      Lipsum3
    &lt;/div&gt;
     &lt;div class="box-item"&gt;
      Lipsum4
    &lt;/div&gt;
     &lt;div class="box-item"&gt;
      Lipsum5
    &lt;/div&gt;
     &lt;div class="box-item"&gt;
      Lipsum6
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;