https://framer.com/m/SmoothScroll-ZBLvSi.js

Io / Enhancements / SmoothScroll

SmoothScroll

SmoothScroll eases the whole document’s scrolling. Drop one instance anywhere on a page and every scroll on that page inherits the easing.

Enhancements1 controlpage-levelno visual output

Examples

Live specimens for every control the component exposes.

Setup

The component draws nothing. One instance per page is enough, and where you put it makes no difference — it attaches to the document, not to its position in the layout. intensity is the only control: higher values coast longer after the reader stops.

Props

The controls exposed on the instance panel.

PropTypeBehaviour
intensitynumberHow long the page keeps coasting after the reader stops. Default 10.
PropTypeBehaviour
intensitynumberHow long the page keeps coasting after the reader stops. Default 10.

Usage

Guidance carried over from the component definition.

Reach for SmoothScroll

A long editorial page should glide rather than jump between wheel steps.

Scroll-driven components on the page need a steadier signal to read.

The whole site should share one scrolling feel — add it to the layout template.

You want the easing without writing or maintaining any script.

Reach for something else

Only one section should scroll differently — this is document-wide.

The page relies on native scroll anchoring or scroll snapping.

Readers have asked for reduced motion — easing fights that preference.

Io — Enhancements

Every specimen above is a live component instance. Colour, type and radius resolve from the project theme tokens.

io

An experiment in what a design system becomes when AI can consume it.

© 2026 io

Contact me

Create a free website with Framer, the website builder loved by startups, designers and agencies.