Javascript: Horizontal animation of divs is not smooth-CodePudding

I have a simple Javascript script that may automatically scroll through all divs inside of "ReviewsWrapper" and on the end maximally smoothly start again this animation from the beginning.

Now, this animation is lagging thought whole animation

Is there any option for how I can make this animation as I mentioned at the beginning?

const flavoursContainer = document.getElementById('ReviewsWrapper');
const flavoursScrollWidth = flavoursContainer.scrollWidth;


window.addEventListener('load', () => {
  self.setInterval(() => {
    const first = document.querySelector('#ReviewsWrapper div');

    if (!isElementInViewport(first)) {
      flavoursContainer.appendChild(first);
      flavoursContainer.scrollTo(flavoursContainer.scrollLeft - first.offsetWidth, 0);
    }
    if (flavoursContainer.scrollLeft !== flavoursScrollWidth) {
      flavoursContainer.scrollTo(flavoursContainer.scrollLeft   1, 0);
    }
  }, 5);
});

function isElementInViewport(el) {
  var rect = el.getBoundingClientRect();
  return rect.right > 0;
}

#ReviewsWrapper {
  position: relative;
  max-width: 100vw;
  overflow-y: hidden;
  overflow-x: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.review {
  min-width: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  margin: 8px;
  background: yellow;
}

p {
  margin-left: 8px;
}

<div id="ReviewsWrapper">
  <div class="review">
    <img src="https://via.placeholder.com/150">
    <p>Review ONE
    </p>
  </div>
  <div class="review">
    <img src="https://via.placeholder.com/150">
    <p>Review TWO
    </p>
  </div>
  <div class="review">
    <img src="https://via.placeholder.com/150">
    <p>Review THREE
    </p>
  </div>
  <div class="review">
    <img src="https://via.placeholder.com/150">
    <p>Review FOUR
    </p>
  </div>
  <div class="review">
    <img src="https://via.placeholder.com/150">
    <p>Review FIVE
    </p>
  </div>
  <div class="review">
    <img src="https://via.placeholder.com/150">
    <p>Review SIX
    </p>
  </div>
</div>

CodePudding user response：

I was searching what was creating this "jump".

It's the margin of the review class. The issue with removing margin is the bad view. I just edit it to make it as you show.

Before:

<div class="review"><!-- with margin -->
   <!-- all content -->
</div>

After:

<div class="review"><!-- without margin -->
   <div class="sub-review"><!-- with padding -->
      <!-- all content -->
   </div>
</div>

Here an example, without margin and without jump :

const flavoursContainer = document.getElementById('ReviewsWrapper');
const flavoursScrollWidth = flavoursContainer.scrollWidth;


window.addEventListener('load', () => {
  self.setInterval(() => {
    const first = document.querySelector('#ReviewsWrapper div');

    if (!isElementInViewport(first)) {
      flavoursContainer.appendChild(first);
      flavoursContainer.scrollTo(flavoursContainer.scrollLeft - first.offsetWidth, 0);
    }
    if (flavoursContainer.scrollLeft !== flavoursScrollWidth) {
      flavoursContainer.scrollTo(flavoursContainer.scrollLeft   1, 0);
    }
  }, 5);
});

function isElementInViewport(el) {
  var rect = el.getBoundingClientRect();
  return rect.right > 0;
}

#ReviewsWrapper {
  position: relative;
  max-width: 100vw;
  overflow-y: hidden;
  overflow-x: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.review {
  min-width: 300px;
  padding: 8px;
}

.sub-review {
  padding: 8px 0px 8px 0px;
  align-items: center;
  justify-content: center;
  display: flex;
  width: 100%;
  background: yellow;
}

p {
  margin-left: 8px;
}

<div id="ReviewsWrapper">
  <div class="review">
    <div class="sub-review">
      <img src="https://via.placeholder.com/150">
      <p>Review ONE</p>
    </div>
  </div>
  <div class="review">
    <div class="sub-review">
      <img src="https://via.placeholder.com/150">
      <p>Review TWO</p>
    </div>
  </div>
  <div class="review">
    <div class="sub-review">
      <img src="https://via.placeholder.com/150">
      <p>Review THREE</p>
    </div>
  </div>
  <div class="review">
    <div class="sub-review">
      <img src="https://via.placeholder.com/150">
      <p>Review FOUR</p>
    </div>
  </div>
  <div class="review">
    <div class="sub-review">
      <img src="https://via.placeholder.com/150">
      <p>Review FIVE</p>
    </div>
  </div>
  <div class="review">
    <div class="sub-review">
      <img src="https://via.placeholder.com/150">
      <p>Review SIX</p>
    </div>
  </div>
</div>