Info
Replaces the default browser scroll with Lenis-powered smooth, fluid motion for a more premium feel.
Required
Setup
Add External Scripts
Place the scripts before the body tag of your project. If you have added them before for another setup, skip this step.
<!-- Lenis CSS -->
<link rel="stylesheet" href="https://unpkg.com/lenis@1.3.16/dist/lenis.css">
<!-- Lenis Script -->
<script src="https://unpkg.com/lenis@1.3.16/dist/lenis.min.js"></script>Add Custom Javascript
Paste the script through Elementor → Custom Code and set it to load after the closing body tag.
document.addEventListener("DOMContentLoaded", () => {
if (document.body.classList.contains("elementor-editor-active")) return;
const lenis = new Lenis({
lerp: 0.1, // Smoothness (0.05 = very smooth, 0.5 = snappy)
wheelMultiplier: 0.7, // Scroll speed (0.5 = slower, 1 = faster)
gestureOrientation: "vertical", // Scroll direction ("vertical", "horizontal", "both")
smoothTouch: false, // Smooth scroll on touch devices
infinite: false // Infinite looping
});
function raf(time) {
lenis.raf(time);
requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
window.ouLenis = lenis;
});Publish and preview live
Some solutions only work on the live site. Always publish and test after each change, as results may not appear in the editor.
Nested Scrolling
Add the data-lenis-prevent="true" attribute to the elements with nested scrolling, like divs using overflow: auto or overflow: scroll. Without it, Lenis can block inner scrolling.
Scroll Smoothness
The lerp setting controls how soft or snappy the scrolling feels. Lower values make scroll movement very smooth and slow, while higher values create more responsive motion.
lerp: 0.1, // Smoothness (0.05 = very smooth, 0.5 = snappy)Scroll Speed
The wheelMultiplier setting controls how quickly the page scrolls when using a mouse wheel or trackpad. Lower values make scrolling slower and more controlled. Higher values increase speed and responsiveness.
wheelMultiplier: 0.7, // Scroll speed (0.5 = slower, 1 = faster)Scroll Direction
The gestureOrientation setting determines which direction scrolling is allowed. You can restrict movement to vertical, horizontal, or allow both directions.
gestureOrientation: "vertical", // Scroll direction ("vertical", "horizontal", "both")Touch Behavior
The smoothTouch setting controls whether smooth scrolling should apply on touch devices. In this setup it is set to false, keeping mobile scrolling natural and responsive.
smoothTouch: false, // Smooth scroll on touch devicesInfinite Scrolling
The infinite setting makes the page scroll in a loop. For it to feel seamless, the first and last elements must be identical and at least 100vh height.
infinite: false // Infinite looping