Smooth scrolling has a controversial reputation on the web. Early libraries (like Locomotive Scroll or custom iScroll wrappers) hijacked native browser scroll entirely, wrapping whole pages in virtual transform containers. On mobile devices and touchpads, this resulted in catastrophic input lag, broken pinch-to-zoom, and non-functional keyboard navigation. Today, modern smooth scroll engines like Lenis rewrite the rules — if deployed with architectural discipline.
01/ 08
The fundamental difference between wheel and touch physics
Desktop mechanical mousewheels emit discrete, notched scroll deltas (usually 100 pixels per click). Without smoothing, scrolling through a website feels like a series of harsh, abrupt steps.
Mobile touchscreens, however, operate on direct tactile physical tracking: the user's finger is in direct physical contact with the glass. Any software layer that intercepts touch events and applies artificial inertia introduces disorienting rubber-band lag.
Preserving native touch momentum respects the sophisticated inertia algorithms engineered into mobile operating systems.
Smooth the wheel where momentum is absent; never hijack the finger where native physics are already perfect.
The fundamental difference between wheel and touch physics02/ 08
The syncTouch anti-pattern on mobile devices
Modern smartphone browsers (Safari iOS and Chrome Android) execute touch scrolling on a dedicated compositor thread completely decoupled from JavaScript.
Enabling `syncTouch: true` in smooth scroll libraries forces touch handling back onto the JavaScript main thread. If a script executes or a component re-renders, scrolling stutters immediately. Setting `syncTouch: false` preserves flawless 120Hz native touch momentum on all mobile devices.
Keeping touch handling on the compositor thread prevents main-thread script execution from causing scroll hiccups.
03/ 08
Tuning Lenis for natural inertia
In our portfolio, Lenis is configured with lightweight, responsive settings: `lerp: 0.09` and `wheelMultiplier: 1.0`. This provides an immediate, tactile connection that feels like a natural luxury extension of the trackpad rather than floaty input lag.
We synchronize Lenis with the GSAP ticker using `gsap.ticker.add((time) => lenis.raf(time * 1000))` and enable `gsap.ticker.lagSmoothing(500, 33)` to prevent sudden jumps during minor GC pauses.
This configuration delivers buttery smooth desktop momentum while maintaining strict frame synchronization.
04/ 08
Preserving keyboard accessibility and browser anchors
Unlike legacy scroll wrappers that set `overflow: hidden` on the body, Lenis scrolls the native window. Native browser anchor links (`href='#section'`), Spacebar scrolling, PageUp/PageDown keys, and screen reader focus traps continue to function flawlessly.
Maintaining native window scrolling ensures that assistive technologies navigate page landmarks without interference.
05/ 08
Respecting user accessibility preferences
Under `@media (prefers-reduced-motion: reduce)`, we automatically destroy smooth scroll instances, returning immediately to default browser scrolling for visitors with vestibular sensitivities.
Accessible engineering ensures that high-craft motion design is always inclusive of user preferences.
06/ 08
GSAP lag smoothing and ticker synchronization
When a browser tab loses focus or executes a heavy background garbage collection sweep, the timestamp delta between frames spikes. Without lag smoothing, the animation engine attempts to catch up by executing multiple seconds of motion in a single jarring jump.
Configuring `gsap.ticker.lagSmoothing(500, 33)` tells the engine to cap the delta time if a frame drop exceeds 500 milliseconds, smoothly resuming motion without sudden visual snaps.
This failsafe ensures that even under heavy system load, scrolling resumes with graceful calm.
Graceful lag recovery prevents sudden visual jumps when returning to background browser tabs.
Ticker synchronization guarantees that smooth scroll physics and GSAP timelines advance in lockstep.
Maintaining synchronized timing loops prevents visual tearing between camera position and DOM elements.
07/ 08
Fine-tuning interpolation curves for luxury trackpad feel
The feel of smooth scrolling depends entirely on the interpolation factor (`lerp`). A lerp of 0.05 feels sluggish and unresponsive; a lerp of 0.20 feels almost identical to native browser scrolling.
We settled on a calibrated `lerp: 0.09` as the sweet spot for modern precision trackpads and mousewheels: responsive enough to feel instantaneous, yet damped enough to eliminate harsh mechanical steps.
Careful tuning transforms scrolling into an effortless tactile pleasure.
The result is a subtle dampening that feels like an organic mechanical extension of the user's fingers.
Precision tuning eliminates the floaty detachment common in legacy smooth scroll scripts.
Subtle dampening turns routine browsing into an immersive tactile experience.
08/ 08
When to avoid smooth scrolling entirely
Not every website benefits from smooth scrolling. Utility dashboards, document editors, and text-dense code documentation should always rely strictly on native browser scrolling.
We reserve smooth scroll dampening exclusively for visual brand flagships, editorial stories, and portfolio archives where cinematic pacing deepens the storytelling experience.
Choosing when not to apply smooth scrolling is as important as fine-tuning its physics.
Applying smooth scroll only where contextually appropriate preserves utility across applications.
Contextual restraint prevents motion design from getting in the way of productivity tools.
Before you ask.
- 01Does smooth scrolling hurt website performance on mobile?
- Only if you hijack touch events. When configured with syncTouch: false, touch scrolling remains 100% native on the mobile compositor thread.
- 02How do you synchronize Lenis smooth scrolling with GSAP ScrollTrigger?
- By updating ScrollTrigger on Lenis scroll events and driving Lenis's RAF loop directly through GSAP's centralized ticker.
Smooth scroll is worth its cost on desktop and rarely worth it on touch, where native scrolling is already off-thread.