<!-- Example usage of the horizontal scroll bar -->
<div class="new-horizontal-scroll-bar-container" data-scroll-speed="100">
  <div class="new-horizontal-scroll-bar-content">
    <span>🚀 Launching new features! </span>
    <span>🔥 Hot deals all week! </span>
    <span>📢 Subscribe now! </span>
    <span>⭐️ Rated #1 in customer service! </span>
  </div>
</div>

<!-- Multiple instances example -->
<div class="new-horizontal-scroll-bar-container" data-scroll-speed="50" style="margin-top:30px;">
  <div class="new-horizontal-scroll-bar-content">
    <span>🎉 Welcome to our website! </span>
    <span>💡 Tips & Tricks every day </span>
    <span>📩 Join our newsletter! </span>
  </div>
</div>

.new-horizontal-scroll-bar-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #222;
  color: #eee;
  white-space: nowrap;
  box-sizing: border-box;
  border: 1px solid #444;
  /* Optional styling */
  font-family: Arial, sans-serif;
  font-size: 18px;
  height: 40px;
  display: flex;
  align-items: center;
}

.new-horizontal-scroll-bar-content {
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
  /* Prevent margin collapsing */
  margin: 0;
  /* To align inline elements */
  vertical-align: middle;
}

/* Spacing between spans */
.new-horizontal-scroll-bar-content span {
  margin-right: 50px;
  display: inline-flex;
  align-items: center;
}

/* Optional icon styling (if you want) */
/* Make emojis or icons slightly bigger */
.new-horizontal-scroll-bar-content span svg,
.new-horizontal-scroll-bar-content span img {
  height: 1em;
  width: auto;
  margin-right: 8px;
}

(function() {
  // Initialize all scroll bars on the page
  class NewHorizontalScrollBar {
    constructor(container) {
      this.container = container;
      this.content = container.querySelector('.new-horizontal-scroll-bar-content');

      // Duplicate the content to achieve seamless scrolling
      this.clone = this.content.cloneNode(true);
      this.clone.setAttribute('aria-hidden', 'true');
      container.appendChild(this.clone);

      this.scrollSpeed = parseFloat(container.getAttribute('data-scroll-speed')) || 100; // px per second
      this.containerWidth = container.offsetWidth;
      this.contentWidth = this.content.scrollWidth;

      // Set some initial states
      this.x = 0;

      // Bind this for animation frame
      this.animate = this.animate.bind(this);

      // Pause on hover - optional
      this.isPaused = false;
      this.container.addEventListener('mouseenter', () => { this.isPaused = true; });
      this.container.addEventListener('mouseleave', () => { this.isPaused = false; });

      this.start();
    }

    start() {
      this.lastTimestamp = null;
      requestAnimationFrame(this.animate);
    }

    animate(timestamp) {
      if (!this.lastTimestamp) this.lastTimestamp = timestamp;
      const elapsed = timestamp - this.lastTimestamp;
      this.lastTimestamp = timestamp;

      if (!this.isPaused) {
        this.x -= (this.scrollSpeed * elapsed) / 1000; // pixels moved

        if (Math.abs(this.x) >= this.contentWidth) {
          this.x += this.contentWidth;
        }

        // Apply transform to both original and clone
        this.content.style.transform = `translateX(${this.x}px)`;
        this.clone.style.transform = `translateX(${this.x + this.contentWidth}px)`;
      }

      requestAnimationFrame(this.animate);
    }
  }

  // Wait for DOM
  document.addEventListener('DOMContentLoaded', () => {
    const containers = document.querySelectorAll('.new-horizontal-scroll-bar-container');
    containers.forEach(container => {
      new NewHorizontalScrollBar(container);
    });
  });
})();

I have the above code to show the auto scroll info bar in website. And I want to update the code that make it  readable and smoother when rescroll. Now the bar will rescroll from beginning automatically, but it not smooth, and will jump to beginning. i want it is continuing to scroll from the beginning follow the previous end so that should not jump back to beginning.

And also I want add some space before the first scroll itema at the first time scroll, because now will show instantly when page loaded and the first item will cropped.

Please update the code to solve the above problems