Smooth scroll

This site scrolls with Lenis, tuned to glide without feeling floaty. It is one block in Site Settings → Custom Code, so it runs on every page: nothing to attach, no layers to touch.

06 / 07

/Settings · 01

The tuned settings

The numbers we ship in every template. Lenis ignores duration and easing while lerp is set, so lerp and wheelMultiplier are the two that shape the feel.

Setting

Value

What it does

lerp

0.1

Smoothing per frame, the part you feel. Lower is softer and floatier, higher is snappier.

wheelMultiplier

0.8

How far one wheel tick or trackpad swipe travels. 1 is the browser default.

duration

1.6

Glide length in seconds. Only used if you delete lerp.

easing

1 − (1 − t)^7

Strong ease-out that goes with duration: quick start, long soft landing.

smoothWheel

true

Smooths mouse wheels and trackpads.

syncTouch

false

Phones and tablets keep native touch scrolling and momentum.

anchors

false

Framer’s own scroll-to-section links stay in charge of anchors.

/The code · 02

Copy it as is

This is the exact block installed on this site, in Site Settings → Custom Code → End of body tag. Paste it into the same field of your project and publish.

<!--
  Plainware Motion Pro: smooth scrolling (Lenis 1.3.1, https://github.com/darkroomengineering/lenis)
  Settings:
    lerp 0.1             smoothing per frame, this is what you feel (lower = softer, higher = snappier)
    wheelMultiplier 0.8  scroll distance per wheel tick (1 = browser default)
    duration 1.6         glide length in seconds, only used by Lenis if you remove lerp
    easing 1-(1-t)^7     strong ease-out curve, used together with duration
    smoothWheel true     smooth mouse wheels and trackpads
    syncTouch false      phones and tablets keep native touch scrolling
    anchors false        Framer handles its own scroll-to-section links
  Visitors with Reduce Motion turned on get normal browser scrolling.
  To remove: Site Settings → Custom Code → End of <body> tag → delete this whole block → publish.
-->
<script src="https://unpkg.com/lenis@1.3.1/dist/lenis.min.js"></script>
<script>
(function () {
  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
  function start() {
    if (!window.Lenis) return;
    var lenis = new Lenis({
      duration: 1.6, lerp: 0.1, wheelMultiplier: 0.8,
      easing: function (t) { return 1 - Math.pow(1 - t, 7); },
      smoothWheel: true, syncTouch: false, anchors: false
    });
    (function raf(time) { lenis.raf(time); requestAnimationFrame(raf); })();
  }
  if (window.Lenis) start(); else window.addEventListener('load', start);
})();
</script>

/Notes · 03

Change it, remove it

Smooth scrolling is the only part of the kit that lives outside the canvas, so here is everything you might want to do with it.

Change it

Open Site Settings → Custom Code → End of body tag, edit a number and publish. Try lerp 0.07 for a softer glide, 0.15 for a snappier one, or wheelMultiplier 1 for native distance.

Remove it

Delete the whole block, from the comment down to the last script tag, and publish. Components, overrides and native effects keep working; nothing depends on it.

Reduced motion

If a visitor has Reduce Motion turned on, the script stops before Lenis starts and the page scrolls natively. Phones and tablets keep native touch scrolling either way.