Grab-to-Pause Auto-Scroll Ticker — HTML CSS JS Snippet

<div class="ast-wrap" id="astWrap">
  <div class="ast-track" id="astTrack">
    <div class="ast-chip" style="background:linear-gradient(160deg,#6366f1,#4338ca)">React</div>
    <div class="ast-chip" style="background:linear-gradient(160deg,#0ea5e9,#0369a1)">Vue</div>
    <div class="ast-chip" style="background:linear-gradient(160deg,#ec4899,#9d174d)">Angular</div>
    <div class="ast-chip" style="background:linear-gradient(160deg,#10b981,#047857)">Svelte</div>
    <div class="ast-chip" style="background:linear-gradient(160deg,#f59e0b,#b45309)">Tailwind</div>
    <div class="ast-chip" style="background:linear-gradient(160deg,#8b5cf6,#5b21b6)">GSAP</div>
  </div>
  <p class="ast-hint">Auto-scrolls continuously — grab and drag to scrub, release to resume.</p>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#f6f7f9;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.ast-wrap{width:100%;max-width:480px}
.ast-track{display:flex;gap:14px;overflow:hidden;border-radius:14px;cursor:grab;touch-action:none}
.ast-track.ast-grabbing{cursor:grabbing}
.ast-chip{flex:0 0 auto;padding:18px 26px;border-radius:12px;color:#fff;font-weight:800;font-size:14px;box-shadow:0 8px 18px rgba(15,23,42,.14);user-select:none}
.ast-hint{text-align:center;color:#9ca3af;font-size:12px;margin-top:14px}

var track = document.getElementById('astTrack');
var wrap = document.getElementById('astWrap');
var SPEED = 0.6; // px per ms — continuous autoplay rate
var pos = 0;
var dragging = false;
var lastFrame = null;
var rafId = null;
var loopWidth = 0;

// Duplicate the chip set once so the track can scroll a full "copy width"
// and then jump back by exactly that width with no visible seam, producing
// an infinite loop from a finite set of elements.
var originalChips = Array.prototype.slice.call(track.children);
originalChips.forEach(function (chip) { track.appendChild(chip.cloneNode(true)); });

function measure() {
  loopWidth = 0;
  for (var i = 0; i < originalChips.length; i++) {
    loopWidth += track.children[i].getBoundingClientRect().width + 14; // + gap
  }
}

function apply() {
  // Wrap pos into [0, loopWidth) so it can grow or shrink without bound while
  // the visual position stays within one seamless loop cycle.
  var wrapped = ((pos % loopWidth) + loopWidth) % loopWidth;
  track.style.transform = 'translateX(' + (-wrapped) + 'px)';
}

function tick(now) {
  if (!dragging) {
    if (lastFrame !== null) pos += SPEED * (now - lastFrame);
    lastFrame = now;
    apply();
  } else {
    lastFrame = now;
  }
  rafId = requestAnimationFrame(tick);
}

var startX = 0, startPos = 0;

function pointerDown(e) {
  dragging = true;
  track.classList.add('ast-grabbing');
  startX = e.touches ? e.touches[0].clientX : e.clientX;
  startPos = pos;
}

function pointerMove(e) {
  if (!dragging) return;
  var x = e.touches ? e.touches[0].clientX : e.clientX;
  pos = startPos - (x - startX);
  apply();
}

function pointerUp() {
  dragging = false;
  track.classList.remove('ast-grabbing');
}

track.addEventListener('pointerdown', pointerDown);
window.addEventListener('pointermove', pointerMove);
window.addEventListener('pointerup', pointerUp);
track.addEventListener('touchstart', pointerDown, { passive: true });
window.addEventListener('touchmove', pointerMove, { passive: true });
window.addEventListener('touchend', pointerUp);

window.addEventListener('resize', measure);
measure();
rafId = requestAnimationFrame(tick);