DocsComponents
Smooth Scroll
Programmatic smooth scrolling with advanced easing, offset control, and automatic reduced-motion support.
Click the button below to experience buttery smooth scrolling to the bottom of this page.
Installation
npm install smoothkitBasic Usage
Advanced Usage
API Reference
Options
| Property | Type | Default | Description |
|---|---|---|---|
duration | number | 800 | Animation duration in milliseconds. Automatically set to 0 if user has reduced motion enabled. |
offset | number | 0 | Offset in pixels from the top. Useful for fixed/sticky headers. Positive values scroll higher, negative values scroll lower. |
easing | EasingType | EasingFunction | 'premium' | Easing function preset or custom function. See easing types below. |
Easing Types
| Value | Description |
|---|---|
'linear' | Constant speed throughout the animation |
'ease-in' | Slow start, fast end |
'ease-out' | Fast start, slow end |
'ease-in-out' | Slow start and end, fast middle |
'spring' | Spring physics with bounce effect |
'smooth-spring' | Gentler spring without overshoot |
'premium' | Premium signature cubic-bezier(0.16, 1, 0.3, 1) - buttery smooth |
'bounce' | Realistic bounce effect at the end |
(t) => number | Custom easing function that takes progress (0-1) and returns eased value |
Return Value
(target: ScrollTarget) => Promise<void>Returns a function that accepts a scroll target and returns a Promise that resolves when the scroll animation completes.
Target Types:
string- CSS selector (e.g., '#section', '.target')HTMLElement- Direct element reference from ref or querySelectornull- No-op, promise resolves immediately