Logo Marquee — Free HTML CSS JS Infinite Scroll Snippet

The logo marquee is the "trusted by" strip on nearly every B2B landing page: a horizontal row of customer or partner logos that scrolls continuously and loops forever. This snippet builds it in plain HTML, CSS, and a few lines of vanilla JavaScript, with a seamless loop, grayscale-to-color hover, edge fades, and pause-on-hover — and uses lightweight inline SVG marks so there are no image requests.

A seamless CSS loop

The whole scroll is driven by one CSS keyframe: lmScroll translates the track to translateX(-50%) over its duration. The reason -50% produces an endless loop is duplication — JavaScript renders the brand set twice (set + set), so the track is exactly two identical halves. When the animation reaches -50%, the first half has scrolled completely off and the second half sits precisely where the first began, so the keyframe restart is invisible. No JavaScript runs per frame; the browser's compositor handles the motion efficiently.

Pacing tied to the logo count

Rather than hard-coding a duration, JavaScript sets animationDuration to BRANDS.length * 3.4 seconds. This keeps the perceived speed steady no matter how many logos you add — twice as many logos take twice as long, so each logo spends the same amount of time on screen. Add or remove brands and the pace stays natural without manual retuning.

Grayscale to color on hover

Each logo renders desaturated and slightly dimmed via filter: grayscale(1) and reduced opacity, which is the conventional "logo wall" treatment that keeps the strip calm and uniform. On hover, the filter drops to grayscale(0) and full opacity so the pointed-at brand pops into color — a small interaction that rewards exploration. The transition on both filter and color makes the shift smooth.

Pause on hover

The track's animation is paused whenever the marquee is hovered, using the pure-CSS rule .lm-marquee:hover .lm-track { animation-play-state: paused }. That lets a visitor stop the strip to read a specific logo without any JavaScript, then it resumes seamlessly when the cursor leaves.

Edge fades with a mask

To avoid logos hard-cutting at the container edges, a horizontal mask-image gradient fades the leftmost and rightmost 10% to transparent, so brands dissolve in and out rather than popping. It's a compositing effect with no overlay elements.

Data-driven, image-free logos

All brands live in a BRANDS array of name, inline SVG path, and color, and a logoHTML function builds each link. Using inline SVG keeps the marquee crisp on any display and avoids the layout shift and extra requests of bitmap logos. To use your real customers, replace the array entries — drop in their SVG marks or swap the SVG for an <img> — and the loop, pacing, and fades keep working.

Customizing it

Change the 3.4 multiplier for a faster or slower crawl, widen the gap between logos, adjust the mask percentages for a longer fade, or remove the grayscale treatment for full-color logos. To scroll the other direction, animate to translateX(50%) from a -50% start, or flip the row with flex-direction: row-reverse. Pair it with a testimonial wall or place it under a feature tabs showcase for a complete social-proof section.