Infinite Horizontal Scroll

How it works

The page turns sideways and never ends. Each turn of the mouse wheel moves a row of full-height editorial panels horizontally, black title cards, a red studio block, an amber list, photographs between them, and when you reach the last panel the first one is already there again. Scroll backwards from the start and you land on the end with no jump. A thin bar across the top fills as you travel through one loop and a large counter in the corner reads the position from zero to a hundred, then wraps.

It needs no library at all. There is no GSAP and no Lenis: the whole effect is native wheel and touch events, a linear interpolation and one animation loop.

Turning vertical scroll into an endless strip

The document itself never scrolls. A fixed, viewport-sized container catches the wheel and turns its vertical movement into a horizontal target position. The strip of panels is then moved with a transform that eases towards that target a little on every frame, so the motion glides instead of stepping with each wheel event. On touch screens a horizontal drag moves the target directly, and the speed of the swipe at release becomes momentum that keeps the strip travelling and slows down on its own.

The loop is an illusion built from copies. When the page loads, the script measures the real width of the whole sequence of panels and appends several cloned copies of it, so the strip holds the sequence repeated on both sides of the original. It then starts in the middle copy. Whenever the position drifts more than half a sequence away from the middle, both the target and the current position are shifted back by exactly one sequence width in the same frame. Because the content at the new position is identical, the eye sees nothing.

Where it gets hard

The seam is the delicate part. The jump has to move the target and the rendered position together, or the easing would visibly travel the whole sequence in reverse. The progress bar has the same problem: at the moment the counter wraps from a hundred back to zero, an eased bar would sweep backwards across the screen, so the wrap is detected and the bar is snapped instead of animated for that one frame. Widths are measured from the rendered layout rather than assumed, so mixed panel widths in viewport units still loop exactly.

Performance, mobile and accessibility

Only one transform changes per frame, so it is cheap on any device, and it uses small viewport height units so mobile browser toolbars do not break the layout. The cost is in what it takes over. Hijacking the wheel removes native scrolling, keyboard scrolling and the scrollbar, and the cloned panels repeat their text for screen readers. If you use it on a real site, keep it to a contained experience, hide the clones from assistive technology and give keyboard users a way to move through the panels.