Smooth Scroll

Files: src/config/config.toml · Skill level: Beginner

In the Tina and Sanity editions, these settings are also in Site settings > Settings > Smooth Scroll.

Scrolling with a mouse wheel or trackpad glides instead of jumping line by line. It uses a small library called Lenis, which loads after the page is ready so it doesn’t slow the first view.

Smooth scroll stays out of the way when it isn’t wanted:

Phones and tablets keep their normal touch scrolling.
Visitors who turn on reduce motion in their device settings keep the browser’s normal scrolling.

Settings

[settings.smoothScroll]
  enable                = true
  respectReducedMotion  = true
  duration              = 1.1
  easing                = "expo"
  smoothWheel           = true
  syncTouch             = false
  wheelMultiplier       = 1
  touchMultiplier       = 1
  anchors               = true
  autoRaf               = true
  stopInertiaOnNavigate = true

Setting	What it does
`enable`	`false` gives you the browser’s normal scrolling
`respectReducedMotion`	`true` turns smooth scroll off for visitors who ask for reduced motion. Keep it on
`duration`	How long the glide lasts, in seconds. Higher feels slower and smoother
`easing`	The feel of the glide: `expo`, `linear`, `easeOutQuad`, or `easeOutCubic`
`smoothWheel`	Smooths mouse wheel and trackpad scrolling
`syncTouch`	Applies smoothing to touch input on devices that have both a mouse and a touchscreen
`wheelMultiplier`	How far one wheel movement scrolls. `1` is normal
`touchMultiplier`	How far one swipe scrolls when `syncTouch` is on. `1` is normal
`anchors`	Glides to `#section` links on the same page instead of jumping
`autoRaf`	Lets Lenis run its own animation loop. Leave it on
`stopInertiaOnNavigate`	Stops any remaining glide when a visitor clicks a link

To change the feel, adjust duration first. Restart npm run dev if a change doesn’t show.

For Developers

The Lenis instance is available as window.__themeLenis. It only exists where smooth scroll is running, so check for it first:

// Pause scrolling while something is open
window.__themeLenis?.stop();
window.__themeLenis?.start();

// Scroll to an element
window.__themeLenis?.scrollTo("#contact");

An element with its own scroll area, such as a long dropdown, should keep native scrolling. Add data-lenis-prevent to it:

<div class="overflow-y-auto" data-lenis-prevent>...</div>

Do It With AI

Make scrolling feel [SLOWER / FASTER]. In src/config/config.toml, change only the duration value
under [settings.smoothScroll]. Keep respectReducedMotion = true and don't change any other key.