# Smooth Scroll

## 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](https://lenis.darkroom.engineering/), 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
```toml
# src/config/config.toml
[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.

<Aside type="note">
  Fade-in and scroll-reveal animations are separate from this. Turning smooth
  scroll off doesn't change them.
</Aside>

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

```js
// 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:

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

### Do It With AI
```text
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.
```