Open to full-time roles
Hire me
Lab

Seamless Marquee Wall

Three rows that loop forever with no visible seam. Scrolling speeds them up and flips their direction, hovering stops a row, and you can grab one and drag it. Resizing does not make them jump.

WebflowGSAPClient-FirstMASTCMSMotion
ScrollTriggerComponentsSlotsVariablesInteractions
SpeedSEOAccessibilityHandoverLaunchSupport

Scroll the page, hover a row, or grab one and drag.

How it works

Why most marquees break

The seam

A CSS marquee that animates from 0 to -100% snaps when it restarts unless the content is exactly duplicated. Here the content is repeated until it is wider than two screens, and the position wraps within the width of one copy, so there is no restart to see.

The resize jump

Most implementations measure once on load. Change the window and the loop width is wrong, so it stutters. This re-fills and re-measures on resize, keeping the wrap accurate.

Speed that means something

Scroll velocity feeds a multiplier that eases back to one when you stop, and scroll direction flips the travel. It ties the row to what the visitor is doing instead of running at a constant speed regardless.

Need a logo wall that behaves?