JSFiddle - React, Tailwind, and code Playground

by Roberto Apasajja

HTML

<div id="marquee">
  <div class="marquee-content">This text should scroll smoothly, even when the javascript thread is busy </div>
</div>

CSS

#marquee {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  overflow: hidden;
  font-family: Arial, sans-serif;
  font-size: 60px;
  line-height: 100px;
  background-color: black;
  color: white;
}
#marquee .marquee-content {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  width: auto;
  white-space: nowrap !important;
  z-index: 2;
}

JavaScript

(function() {
  var content, contentWidth, jankMyShit, keyframes, marquee, style, totalWidth, width;

  marquee = document.getElementById('marquee');

  content = marquee.querySelector('.marquee-content');

  width = marquee.clientWidth;

  contentWidth = content.offsetWidth;

  totalWidth = width + contentWidth;

  keyframes = `@keyframes scroll-marquee {\n  0% {transform:translate3d(${totalWidth}px,0px,0px);}\n  100% {transform:translate3d(0px,0px,0px);}\n}`;

  style = document.createElement('style');

  style.id = 'scroll-marquee-style';

  style.innerHTML = keyframes;

  document.head.appendChild(style);

  content.style.animation = "scroll-marquee 10s linear infinite";

  // periodic interruption for {duration} ms
  jankMyShit = function(interval, duration) {
    var jank;
    jank = function() {
      var end, now, results;
      now = Date.now();
      end = now + duration;
      results = [];
      while (now < end) {
        results.push(now = Date.now());
      }
      return results;
    };
    return setInterval(jank, duration);
  };

  jankMyShit(500, 250);

}).call(this);

//#...