Scroll effect

Infinite Horizontal Scroll

by Vanguardia · motionprompts.dev

A seamless looping horizontal scroll gallery driven by raw wheel and touch input. Vertical wheel/touch deltas are mapped to horizontal movement with a lerp-smoothed translateX, cloned section buffers on both sides create an endless loop, and a synced progress bar and percentage counter track position.

Type: Web motion
Framework: Vanilla JS
Trigger: wheel

Save with a free account Customize for your product

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: raf-lerp
Complexity: 2/5
Pinned: no
Reduced motion: not handled

wheel/touch delta accumulated into targetScrollX, exponentially smoothed onto the track with lerp factor 0.05 (~critically damped, no overshoot), wrapped seamlessly at ±0.5 sequence widths against 2 cloned buffers per side; touch flicks add a *20 impulse decaying at 0.95/frame; the progress bar follows the same 0.05 lerp except on wrap frames, where it snaps

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev18,638 charsCustomize

# Infinite Horizontal Scroll

## Goal

Build a full-page, seamlessly looping horizontal scroll experience: a row of 8 editorial panels that scrolls sideways for…

The build prompt

More like this

A pixel wizard casting spells

Rainbow Road Pixel Animation

One-File Generative Visual Demo

Pixel-art rabbit archer sprite animation loop

Vibe-Coded Pixel Wizard Game

Realistic 3D Taj Mahal Model

Fresh recipes, every week.