MODRACX

← Archive & Insights

Reinventing the Marquee: High-Performance 60fps Smooth Scrolling with marquee-js

The HTML <marquee> tag is long deprecated, and traditional JavaScript marquee plugins rely on legacy `setInterval` loops that trigger layout thrashing and high CPU battery drain on mobile devices. I created marquee-js to deliver 60fps sub-pixel smooth infinite scrolling using hardware-accelerated CSS transforms and delta-time rendering loops.

By Kenneth D'Silva • Reading Time: 13 min read • Category: Performance & Speed

1. Why Ticker Marquees Lag on Modern Browsers

Scrolling logo bars, announcement tickers, and news banners are common in ecommerce header bars. However, traditional implementations alter `element.style.left` or `scrollLeft` on fixed timer ticks. Updating layout properties causes browser reflows and repaints on every frame.

On mid-range mobile devices, this results in visual stutter, dropped frames, and excessive battery draw. I built `marquee-js` using GPU-promoted `transform: translate3d()` positioning driven strictly by `window.requestAnimationFrame()` with delta-time synchronization.

2. Key Innovations in marquee-js

  • Delta-Time Frame Synchronization: Speed is calculated in pixels per second regardless of monitor refresh rate (60Hz, 120Hz, or ProMotion displays).
  • Seamless Infinite Duplication: Clones content children dynamically to ensure seamless looping without empty gaps or abrupt jumps.
  • Interactive Controls: Pause on hover, slow down on mouse enter, reverse direction, or drag horizontally on touch screens.
  • Accessibility (WCAG): Respects `prefers-reduced-motion` media queries automatically, halting movement for users prone to motion sensitivity.

3. Open Source Repository

Check out marquee-js on GitHub: github.com/Modracx/marquee-js.

Suggested & Related Reading