FX-001 · Smooth Scroll
Smooth scroll for websites.
The wheel glides instead of stepping, and every scroll-driven scene on the page moves in the same frame. Scrolling stays native underneath, so the keyboard, find-in-page and anchors all keep working.
- Weight0.9 KB
- LibraryLenis
- PhonesNative
- Licence€39
Live · Glide
Scroll. It glides.
Smooth Scroll is running on this page. Turn your wheel once and feel the page settle instead of stopping dead.
Touch screens already scroll smoothly, so here your finger moves the page natively. Try this page with a mouse wheel to feel the difference.
Live · In step
Never out of step.
This row moves on the same smoothed scroll. Both update in the same frame, on GSAP's ticker, so nothing drifts.
Live · Native
Still real scrolling.
The keyboard, find-in-page and anchors work as usual, and reduced motion never loads it.
01 — Details
What it does.
One clock
Lenis and ScrollTrigger share GSAP's ticker, so smoothing and scroll scenes never drift apart.
Native underneath
The page still scrolls the normal way, so the keyboard, find-in-page and anchors keep working.
Tunable feel
Set how floaty it is and how far the wheel travels, from the markup.
Steps aside
It never loads for reduced motion, and a panel that scrolls on its own can opt out with one attribute.
02 — Prompt
Free AI prompt.
Paste this into your AI coding tool to build the effect in your own stack. It carries the behaviour, the build and the traps we hit in production. It is free for pitches and personal work.
Add smooth scrolling to this website with Lenis, synced to GSAP ScrollTrigger. Behaviour - Wheel and trackpad scrolling glide to a stop instead of stepping. - Scroll-driven animations stay exactly in step with the smoothed position. - Touch keeps its native scrolling. Build - Create Lenis with autoRaf: false and a lerp around 0.1. - Call ScrollTrigger.update from the Lenis scroll event. - Drive Lenis from GSAP's ticker with gsap.ticker.add(t => lenis.raf(t * 1000)), and call gsap.ticker.lagSmoothing(0). - Add Lenis's recommended CSS, including the rules for html.lenis and its stopped state. Must hold - Never load it with prefers-reduced-motion. - Panels that scroll on their own, such as menus and modals, need data-lenis-prevent, and Lenis must stop while a modal is open. - Anchor links must land in the right place, and keyboard scrolling and find-in-page must keep working. - iframes can swallow the wheel, so set pointer-events: none on them while smoothing. - On teardown, remove the ticker callback, restore lagSmoothing(500, 33) and destroy Lenis. Done when the wheel feels smooth, a pinned scene never jitters against the scroll, and a modal scrolls on its own without moving the page.
03 — Code
Or drop it in.
With a licence, the finished effect is one attribute. The small runtime fetches what it needs and removes everything again if the element goes.
<script src="/fx/sitefx.js"></script> <body data-fx="smooth" data-fx-smooth-lerp="0.1"> <div class="modal" data-lenis-prevent>Scrolls on its own</div> </body>
| Option | Default | What it does |
|---|---|---|
| data-fx-smooth-lerp | 0.1 | 0.05 is floaty, 0.2 is tight |
| data-fx-smooth-wheel | 1 | Wheel multiplier |
| data-fx-smooth-anchors | true | Set to false to leave #links to the browser |
| data-lenis-prevent | — | On a panel that scrolls on its own |
04 — FAQ
Questions.
Does smooth scrolling hurt SEO or accessibility?
No. The page still scrolls natively, so crawlers, the keyboard and find-in-page work as usual, and visitors who prefer reduced motion never load it.
Does it work with ScrollTrigger?
Yes. Both run on GSAP's ticker, so scroll-driven scenes stay in step with the smoothed position.
What about phones?
Touch keeps its native scrolling. The smoothing applies to wheels and trackpads.
Can a panel scroll on its own?
Yes. Add data-lenis-prevent to a menu, modal or list and it scrolls by itself.
Licence
Smooth Scroll · €39
One effect, yours to keep. Unlimited client projects, 1 developer, 12 months of updates. Prices exclude VAT.