By Mehdi HassanSmooth scrolling is one of those choices designers love and developers argue about. Done well, it makes an animated site feel polished. Done badly, it makes the whole page feel like it's wading through syrup. Lenis is one of the most popular libraries for it, and this guide gives a balanced view: what it does, when it helps, and when to leave scroll alone. It's part of our website animation guide.
What is Lenis smooth scroll?
Lenis is an open-source JavaScript library that smooths scrolling by interpolating the scroll position toward the target over a few frames, rather than jumping in steps. Each wheel tick moves the page a little further, easing toward where the native scroll would have landed. The effect is a softer, more continuous scroll.
The important design choice is that Lenis keeps native scrolling. Older smooth-scroll libraries faked the scroll by moving the whole page with CSS transforms, which broke position: sticky, anchor links, find-in-page and scroll restoration. Lenis drives the real scroll position, so those browser features keep working. That's a big part of why it replaced the previous generation of libraries.
Lenis also integrates with animation libraries. It's commonly paired with GSAP ScrollTrigger, and the Motion documentation includes a Lenis integration guide, so scroll-linked animations read the smoothed position rather than the raw one.
Should a marketing website use smooth scrolling?
A marketing website should use smooth scrolling only when scroll-linked animation is a core part of the page, and skip it otherwise. When sections scrub, pin and reveal with scroll, raw wheel input makes the motion jump in steps, and smoothing makes it look intentional. When the page is mostly text and images, smoothing adds JavaScript and changes a feel people already know, for no real gain.
Site type | Use Lenis? | Why |
|---|---|---|
Scroll-driven product story with pinned sections | Yes | Smooths scrubbed animation and keeps it in sync |
Brand or portfolio site with heavy motion | Usually | Polish matters and motion is the point |
Standard SaaS marketing site with light reveals | Usually not | Reveals look fine on native scroll |
Blog, docs or help center | No | People scan and search; native scroll is expected |
E-commerce category and product pages | No | Speed and predictability matter more than feel |
Web app or dashboard | No | Nested scroll areas and precise control |
What are the pros and cons of Lenis?
Lenis gives scroll-driven pages a consistent feel with little setup, but it replaces scroll physics everyone already knows and adds a constant JavaScript task while scrolling. Whether that trade is worth it depends on how much of the page is animated.
Pros
- Makes scrubbed and parallax animation look continuous instead of stepped
- Keeps native scroll, so sticky, anchors and find-in-page still work
- Small library with a simple setup
- Integrates with GSAP ScrollTrigger and Motion
- Gives consistent feel across mice with different wheel behavior
Cons
- Overrides the scroll feel people are used to on their own device
- Can feel laggy if the smoothing is set too strong
- Adds JavaScript work on every scroll frame
- Nested scrollable areas such as modals need extra setup
- Easy to forget reduced-motion handling
Is smooth scrolling bad for accessibility?
Smooth scrolling isn't inherently inaccessible, but it becomes a problem when it ignores reduced-motion settings, breaks keyboard scrolling or traps focus. Smoothed scroll is a form of motion, and some people with vestibular disorders are sensitive to scroll that keeps moving after they stop. Others rely on the keyboard, screen readers or assistive scrolling that expect native behavior.
- Respect prefers-reduced-motion: check the media query before initializing, and don't start Lenis when it matches.
- Keep keyboard scrolling native: arrow keys, Page Down, Space and Home should work exactly as usual.
- Keep focus scrolling working: tabbing to a link should scroll it into view without fighting the library.
- Don't smooth touch: on phones, leave scrolling to the operating system.
- Test with zoom: browser zoom and text resizing shouldn't break scroll positions.
If you're working toward WCAG conformance, smooth scroll is a small item, but it's the kind of detail an audit flags. Our overview of website accessibility for startups explains the standards, and how to test website accessibility shows how to check this yourself.
How do you set up Lenis responsibly?
Set up Lenis with gentle smoothing, native touch, reduced-motion support and a clean integration with your animation library. The defaults are reasonable, but a few decisions make the difference between polished and annoying.
Check reduced motion first
Read the prefers-reduced-motion media query on load and skip initializing Lenis when it's set. Listen for changes so the setting applies without a reload.
Keep the smoothing gentle
Use a light interpolation setting so scroll catches up quickly. If people notice the smoothing, it's probably too strong.
Leave touch native
Smooth wheel input only. Phones and tablets keep their own scroll physics.
Wire it to your animation library
Drive GSAP ScrollTrigger or Motion's scroll values from Lenis so animations stay in sync, using one animation frame loop.
Handle nested scroll areas
Mark modals, menus and scrollable panels so they scroll natively instead of being captured.
Destroy it on route changes if needed
In Next.js and other single-page setups, make sure Lenis and its listeners are cleaned up and recreated correctly between pages.
For example, suppose a page has a pinned product story
For example, suppose a landing page has one pinned section where four product steps animate as you scroll. Without smoothing, a mouse wheel moves in steps, so the animation jumps between frames. With Lenis driving ScrollTrigger, the scroll eases between positions and the steps blend.
The responsible setup: Lenis starts only if reduced motion is off, touch stays native, the pinned section's timeline reads Lenis's scroll position, and a modal on the same page scrolls natively. For a visitor with reduced motion on, the pinned section is replaced by the four steps stacked as static cards, so nobody misses the content.
When should you skip smooth scrolling entirely?
Skip smooth scrolling when the site is content-first, when the team can't maintain the integration, or when performance is already tight. Blogs, documentation, help centers and pricing pages benefit from predictable native scroll. Smoothing on those pages adds risk without adding meaning.
Maintenance matters more than people expect. Every new section with scroll animation has to be wired up to the smoothing setup, and framework upgrades can break the integration. If your site is moving platforms or rebuilding, it's a good moment to question whether you need it at all, the same way you'd question any feature in a migration decision. Platform matters too: our comparison of Webflow and Next.js covers how much control each gives you over custom scroll behavior.
