Lenis Smooth Scroll

Enable and configure Lenis smooth scrolling — duration, multipliers, easing, and per-page exclusions.

Lenis is a smooth scroll library that intercepts native scroll events and replays them with momentum and easing — replacing the browser’s default instant-jump scroll with a fluid, inertia-based movement.

When enabled, Lenis runs site-wide. Every scrollable page gets the same smooth scroll behaviour automatically. Use Excluded Pages to opt specific pages out.

Location

Top Panel → Global Settings → Smooth Scroll

Open the settings drawer from the top panel, then select the Smooth Scroll tab.

Enable

The section header contains a master toggle. Flip it on to activate Lenis across the entire site. Flip it off to revert to native browser scrolling.

When enabled, a status indicator on the toggle turns green to confirm Lenis is active.

Tip: Disable Lenis on pages where you use a custom scroll library or full-page scroll plugins (e.g. FullPage.js, Swiper vertical) to avoid conflicts. Use Excluded Pages for that rather than turning off the global toggle.

Controls

Duration

Duration of the smooth scrolling animation in seconds.

Controls how long each scroll “pulse” takes to settle. Higher values feel heavier and more cinematic; lower values feel snappier.

Setting Duration to 0 enables instant scrolling mode — Lenis uses lerp: 1 internally and skips duration and easing entirely. This is equivalent to native scroll but routed through Lenis, which is useful when you want Lenis running (for scroll-velocity access or scroll-linked animations) without any perceived lag.

Mouse Multiplier

Multiplier for mouse wheel scroll sensitivity. Higher values make scrolling faster.

Scales how far the page moves per mouse wheel tick. Values above 1 feel faster than native; values below 1 feel slower. Leave at 1 unless the default feels sluggish or too aggressive on your target audience’s hardware.

In the generated code this maps to wheelMultiplier, not mouseMultiplier.

Touch Multiplier

Multiplier for touch scroll sensitivity. Higher values make touch scrolling faster.

Scales scroll distance on touch devices. The default 1.5 compensates for the lower scroll velocity typical on touch screens and keeps the feel consistent with desktop.

Easing

Easing function for the smooth scrolling animation.

The easing curve shapes how quickly each scroll pulse accelerates and decelerates. All options are ease-out curves — the scroll starts fast and slows to rest.

Tip: Ease Out Expo suits most sites. Switch to Ease Out Cubic for content-heavy editorial sites where a softer feel is preferable. Avoid Linear in production — without deceleration the scroll feels mechanical.

Smooth Touch

Enable smooth scrolling for touch devices. Disabled by default for better performance.

Touch devices natively handle momentum scrolling in hardware. Enabling this option overrides that with Lenis-driven easing, which gives a consistent cross-device feel but uses more CPU on mobile.

Leave this off unless you have a strong reason for touch consistency — native iOS and Android momentum scroll is already polished and expected by mobile users.

Excluded Pages

Select pages where Lenis smooth scrolling should be disabled. These pages will use default browser scrolling instead.

A searchable multi-select dropdown listing all pages on your site. Pages you add here will load without Lenis — the rest of the site continues using smooth scroll.

Common reasons to exclude a page:

• The page uses a conflicting scroll library (FullPage.js, Locomotive Scroll, etc.)
• The page is a contact form or checkout where scroll precision matters
• A landing page with custom scroll-jacking animations built in vanilla JS

Live demo — smooth scroll feel

The demo below simulates the eased deceleration Lenis applies to each scroll pulse. Drag the slider to scroll the content pane — the movement overshoots slightly and eases to rest, matching the Ease Out Expo default.

The eased deceleration is what Lenis applies to the page’s scroll position on every wheel or touch event. Increasing Duration makes the ease-out last longer; switching to Ease Out Cubic gives a softer landing.

Generated code

Motion.page generates a self-contained script block injected into every page (unless excluded). The script initialises Lenis, starts the requestAnimationFrame loop, and attaches cleanup logic:

window._mp_lenis = new Lenis({
  "duration": 1.2,
  "easing": (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
  "smoothTouch": false,
  "wheelMultiplier": 1,
  "touchMultiplier": 1.5
});

function _mp_raf(time) {
  window._mp_lenis.raf(time);
  requestAnimationFrame(_mp_raf);
}
requestAnimationFrame(_mp_raf);

When you change settings or disable Lenis, window._mp_lenis_cleanup() is called automatically to destroy the instance and remove the RAF loop before the new config is applied.

Tip: The Mouse Multiplier setting in the panel maps to wheelMultiplier in the generated code — the Lenis API name. The builder uses the friendlier label in the UI.

Common patterns

Subtle cinematic feel

Lower the duration and use Ease Out Quart for a restrained, editorial look — scroll feels slightly weighted without being sluggish.

Fast and snappy

For app-like interfaces where responsiveness matters more than feel, keep duration short and multipliers at default.

Heavy parallax site

Slow, dramatic scrolling for scroll-jacked parallax layouts. High duration, low mouse multiplier.

Consistent cross-device feel

Enable Smooth Touch and align the touch multiplier with the mouse multiplier for identical behaviour on all devices.

Related

• Click Trigger — Trigger animations from click events, compatible with Lenis-controlled pages
• Scroll Trigger in the SDK — SDK scroll-linked animations that integrate with Lenis scroll events