Smooth Scroll
Set up Lenis once and share its scroll timing with GSAP ScrollTrigger.
- Dependencies
- lenis · gsap
- Size
- 77 lines
- Controls
- 4 controls
Installation
CLI · shadcn registry
npx shadcn@latest add https://ui.onycx.dev/r/smooth-scroll.json1 · Dependencies
npm install lenis gsap2 · Copy the source
components/onycx/smooth-scroll.tsx
Requires React 19 and Tailwind CSS v4. Copy the source from the smooth-scroll.tsx tab after tweaking: your values are baked in as the new defaults. Exported image examples use portable sample artwork. Replace it with your own media as needed.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | The page content that scrolls. |
| duration | number | 1.05 | Seconds a wheel gesture takes to settle (the jewellery and spa sites used 1.15). |
| wheelMultiplier | number | 1 | Scales wheel delta. |
| anchorOffset | number | -96 | Offset for same-page anchor jumps under a fixed header. |
| desktopOnly | boolean | true | Smooth only at 1024px+ with hover and a fine pointer; false smooths every device without reduced motion. |