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.
Add this code with a snippets plugin right before the closing </body> tag.
<link rel="stylesheet" href="https://unpkg.com/lenis@1.3.11/dist/lenis.css">
<script src="https://unpkg.com/lenis@1.3.11/dist/lenis.min.js"></script>
<script>
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;
document.querySelectorAll('[ou-lenis="prevent"]:not([data-lenis-prevent])')
.forEach(el => el.setAttribute('data-lenis-prevent', ''));
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();
});
});
</script>
Some solutions only work on the live site. Always publish and test after each change, as results may not appear in the editor.