What is smooth scrolling?
With native scrolling, each mouse-wheel notch jumps the page a fixed distance. Smooth scrolling interpolates that movement: the page glides toward its destination with an easing curve, so the whole site feels continuous and controlled.
It is the base layer behind most award-winning scroll experiences, because every scroll animation on top of it looks smoother too.
How to enable smooth scroll in Elementor
- In your WordPress dashboard, open Pro Effects.
- Go to the Global tab.
- Turn on Smooth Scroll.
- Adjust the speed (duration) with the slider.
- Save. It applies to every page of the site.
There's no widget to place and nothing to configure page by page.
Settings
| Setting | What it does | Default |
|---|---|---|
| Enable | Turns smooth scrolling on or off for the whole site | Off |
| Duration | How long the scroll takes to reach its destination: higher = slower and more cinematic | 1.2 s |
A duration between 1 and 1.4 seconds feels premium without being slow. Very high values can feel sluggish on touch devices.
Smooth scroll and scroll animations
The most common problem when adding smooth scroll by hand is that scroll-triggered animations fall out of sync: they fire late or jump. This effect connects Lenis to GSAP ScrollTrigger automatically, so pinned sections, reveals and parallax keep working with the smoothed scroll.
It pairs well with scroll effects such as Stacked Cards, Horizontal Scroll and Scroll Stack.
When to use it — and when not to
Use it on creative, portfolio and brand sites, on landing pages with several animated sections, and whenever you want an app-like feel.
Think twice on long text-heavy pages (documentation, blogs) where readers want direct control, and on e-commerce listings where people scroll fast to scan products.
Related effects
- Horizontal Scroll — sections that move sideways as you scroll down.
- Scroll Stack — one section slides over the other.
- Sticky Scroll — scrollytelling with a fixed image.
