Marquee / Infinite Ticker

When to use this

• Building a horizontally scrolling logo strip, news ticker, or text ribbon.
• Creating a continuous infinite scroll effect with no visible seam or jump.
• Adding scroll-speed coupling where the ticker accelerates with page scroll.
• Implementing hover-to-pause on a running marquee.
• Do NOT use this for scroll-triggered entrance animations; see scroll-reveal-choreography instead.

Mental model

An infinite marquee works by duplicating the content and translating the entire strip. When the first copy scrolls fully off-screen, it is in exactly the same position relative to the second copy as it was at the start. The animation resets to 0 and the cycle repeats. Because the two copies are identical, the reset is invisible.

The math: the strip contains two copies of the content side by side. The total width of one copy is W. The animation translates from 0 to -W (or W for reverse direction). At -W, the second copy is now exactly where the first copy started. Reset to 0 and it is seamless.

CSS @keyframes with translateX(-50%) handles this when the strip is exactly 2x the content width. For JS-driven marquees with velocity control, you track a position value that wraps around using modulo: position = ((position - speed) % contentWidth + contentWidth) % contentWidth.

The seam problem: sub-pixel rendering can cause a 1px gap between the two copies on some displays. Fix by overlapping the copies by 1px or using will-change: transform to promote to a compositor layer where sub-pixel rendering is handled differently.

For RTL (right-to-left) languages, the marquee scrolls in the opposite direction (right to left is already the default Western reading direction marquee, so RTL content marquees should scroll left to right).