Glide.js Logo Carousel Autoplay — Marketing Logo Strip Snippet

Every SaaS marketing page has one of these: a row of client logos slowly drifting sideways under a "Trusted by teams at" headline. It looks like a passive, ambient animation, but underneath it's the same type: 'carousel' plus autoplay combination as the testimonial slider — configured for a very different feel.

Why linear easing matters here specifically

js animationDuration: 800, animationTimingFunc: 'linear',

The testimonial slider used a default eased transition — appropriate for a slide that should feel like it's settling into place. A logo strip is the opposite: it's meant to read as *continuous, ambient motion*, closer to a ticker tape than a deliberate slide change. animationTimingFunc: 'linear' removes the ease-in/ease-out curve so the strip moves at a constant velocity throughout each transition, which is what makes back-to-back autoplay advances feel like one smooth drift rather than a series of distinct, decelerating snaps.

perView: 5 with responsive breakpoints

js perView: 5, breakpoints: { 900: { perView: 4 }, 640: { perView: 3 }, 420: { perView: 2 } },

breakpoints is Glide's built-in responsive config system: keys are max-width pixel values, and each maps to an options object that *overrides* the base config once the viewport is at or below that width. Glide attaches a resize listener internally and swaps configurations live — you never write your own window.matchMedia or resize handler. This matters a lot for a logo strip specifically, because showing 5 logos at once on a 380px-wide phone screen would squeeze each one down to an unreadable sliver; dropping to perView: 2 at the narrowest breakpoint keeps every wordmark legible.

The edge fade mask

-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)

This is plain CSS, not a Glide feature, but it's what sells the "infinite ticker" illusion: without it, logos would abruptly appear and disappear at the hard edges of the container as the carousel loops. Masking the strip with a gradient that fades to transparent in the outer 8% on each side makes logos fade in and out gently instead of clipping, which reads as continuous rather than mechanical.

hoverpause as an accessibility/UX safety valve

Autoplay for social-proof logos is a case where pausing on hover matters more than it might for a background animation: a user who wants to actually *read* a specific logo — check if their own company or a competitor is listed — needs the strip to stop moving under their cursor. hoverpause: true (the same option as the testimonial slider) makes that automatic with zero extra JS: Glide's Autoplay component already listens for mouseenter/mouseleave on the track and pauses/resumes accordingly.

Reusing it

Swap the text wordmarks for real logo images (SVGs work best, sized to a consistent height with object-fit: contain) and the mechanism doesn't change at all — perView, breakpoints, autoplay, and the mask technique apply identically. Pair this with the product gallery slider if you also need a manually-navigable, non-autoplaying multi-item slider elsewhere on the same page.