00
WorkStudioJournalContact
studio@onyx.agency

Scroll as choreography: designing the pace of desire

Craft2024.097 min read

Scroll is the most overlooked design material on the web. We control typography, colour, layout, animation — but we rarely design the pace at which the user moves through the content. We let the browser's default scroll speed determine the rhythm of the experience.

This is a mistake, particularly in luxury. The pace at which content reveals itself directly affects how it is perceived. Fast scrolls create urgency. Slow scrolls create contemplation. The same product, presented at different scroll speeds, generates different emotional responses.

We tested this with a controlled experiment across three luxury eCommerce sites. The same content, the same photography, the same layout — but with three different scroll behaviours: browser default, Lenis smooth scroll at 0.8x speed, and a custom scroll with variable speed tied to content density.

The results were consistent across all three sites. The smooth scroll at 0.8x speed increased time-on-site by 40% and average scroll depth by 25%. But the variable-speed scroll — slower through hero images, faster through navigation zones, pausing slightly at section transitions — outperformed both. Time-on-site increased 65%, and conversion rate lifted 12%.

The mechanism is attention allocation. When the scroll slows through a hero image, the user spends more time with it. They notice the photography. They read the caption. They form an opinion about the product. When the scroll speeds through a transition zone, they do not feel the dead space between sections.

The technical implementation uses Lenis for the base smooth scroll, with GSAP ScrollTrigger controlling velocity zones. Each section defines its own scroll speed: hero images at 0.6x, text blocks at 0.9x, transition zones at 1.2x, and product grids at 1.0x. The transitions between speeds use easing curves so the velocity changes feel natural, not mechanical.

The design implications go beyond performance metrics. When you design the scroll speed, you are designing the emotional arc of the page. You control where the user lingers and where they flow. You create moments of emphasis and moments of release. The page becomes choreography, not layout.

Scroll-as-choreography requires more design time, more development time, and more testing. But for luxury brands where the experience is the product, the investment in pacing is the investment in perception.