This snippet lets you add smooth, customizable scrolling to your site with the Lenis library. It gives pages a premium, polished effect while letting you adjust easing, speed, and direction. You can also control whether it runs in the Elementor editor and start or stop scrolling with simple attributes.
Copied!
It's on your clipboard.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Components
Wireframes
No items found.
Basics
Oops, nothing here...
Scroll
Esc
Overview
Setup: External Scripts
<!-- Lenis Smooth Scroll Styles -->
<link rel="stylesheet" href="https://unpkg.com/lenis@1.3.11/dist/lenis.css">
<!-- Lenis Smooth Scroll Script -->
<script src="https://unpkg.com/lenis@1.3.11/dist/lenis.min.js"></script>Step 0: Copy structure to Elementor
Copy To Elementor
Step 0: Add HTML
Step 0: Add custom CSS
Step 0: Add custom Javascript
document.addEventListener('DOMContentLoaded', () => {
// Run in Elementor editor (true=yes, false=no)
const OU_LENIS_RUN_IN_EDITOR = false;
// Easing smoothness (0.05=very smooth, 0.5=snappy)
const OU_LENIS_LERP = 0.1;
// Scroll sensitivity (0.5=slower, 1=fast)
const OU_LENIS_WHEEL = 0.7;
// Direction ("vertical", "horizontal", "both")
const OU_LENIS_ORIENTATION = "vertical";
// Debug logs (true=show, false=hide)
const OU_LENIS_DEBUG = false;
const inEditor =
document.body.classList.contains('elementor-editor-active') ||
(window.elementorFrontend?.isEditMode && window.elementorFrontend.isEditMode());
if (inEditor && !OU_LENIS_RUN_IN_EDITOR) return;
if (typeof window.Lenis !== 'function') return;
const lenis = new window.Lenis({
lerp: OU_LENIS_LERP,
wheelMultiplier: OU_LENIS_WHEEL,
gestureOrientation: OU_LENIS_ORIENTATION,
});
(function loop(t){
lenis.raf(t);
requestAnimationFrame(loop);
})(0);
document.addEventListener('click', e => {
const btn = e.target.closest('[ou-lenis]');
if (!btn) return;
const v = btn.getAttribute('ou-lenis');
if (v === 'stop') lenis.stop();
if (v === 'start') lenis.start();
});
});Step 5: Add custom Javascript
document.addEventListener('DOMContentLoaded', () => {
// Run in Elementor editor (true=yes, false=no)
const OU_LENIS_RUN_IN_EDITOR = false;
// Easing smoothness (0.05=very smooth, 0.5=snappy)
const OU_LENIS_LERP = 0.1;
// Scroll sensitivity (0.5=slower, 1=fast)
const OU_LENIS_WHEEL = 0.7;
// Direction ("vertical", "horizontal", "both")
const OU_LENIS_ORIENTATION = "vertical";
// Debug logs (true=show, false=hide)
const OU_LENIS_DEBUG = false;
const inEditor =
document.body.classList.contains('elementor-editor-active') ||
(window.elementorFrontend?.isEditMode && window.elementorFrontend.isEditMode());
if (inEditor && !OU_LENIS_RUN_IN_EDITOR) return;
if (typeof window.Lenis !== 'function') return;
const lenis = new window.Lenis({
lerp: OU_LENIS_LERP,
wheelMultiplier: OU_LENIS_WHEEL,
gestureOrientation: OU_LENIS_ORIENTATION,
});
(function loop(t){
lenis.raf(t);
requestAnimationFrame(loop);
})(0);
document.addEventListener('click', e => {
const btn = e.target.closest('[ou-lenis]');
if (!btn) return;
const v = btn.getAttribute('ou-lenis');
if (v === 'stop') lenis.stop();
if (v === 'start') lenis.start();
});
});Step 5: Implementation
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.
