Use this code snippet to create the smooth scrolling effect on your Webflow website.
Copy Code
<!-- For Webflow, just before closing head tag -->
<!-- Lenis Smooth Scrolling Styles -->
<style>
html.lenis {
height: auto;
}
.lenis.lenis-smooth {
scroll-behavior: auto;
}
.lenis.lenis-smooth [data-lenis-prevent] {
overscroll-behavior: contain;
}
.lenis.lenis-stopped {
overflow: hidden;
}
</style>
<!-- For Webflow, just before the closing head tag -->
<!-- Calling Lenis -->
<script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@1.0.23/bundled/lenis.min.js"></script>
<!-- Lenis Settings & Switches -->
<script>
// LENIS SMOOTH SCROLL
let lenis;
if (Webflow.env("editor") === undefined) {
lenis = new Lenis({
lerp: 0.1,
wheelMultiplier: 0.7,
gestureOrientation: "vertical",
normalizeWheel: false,
smoothTouch: false
});
function raf(time) {
lenis.raf(time);
requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
}
$("[data-lenis-start]").on("click", function () {
lenis.start();
});
$("[data-lenis-stop]").on("click", function () {
lenis.stop();
});
$("[data-lenis-toggle]").on("click", function () {
$(this).toggleClass("stop-scroll");
if ($(this).hasClass("stop-scroll")) {
lenis.stop();
} else {
lenis.start();
}
});
</script>
// For Webflow, just before closing head tag
// Lenis Smooth Scrolling Styles
<style>
html.lenis {
height: auto;
}
.lenis.lenis-smooth {
scroll-behavior: auto;
}
.lenis.lenis-smooth [data-lenis-prevent] {
overscroll-behavior: contain;
}
.lenis.lenis-stopped {
overflow: hidden;
}
</style>
// For Webflow, just before closing body tag
// Calling Lenis
<script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@1.0.23/bundled/lenis.min.js"></script>
// Lenis Settings & Switches -->
<script>
let lenis;
if (Webflow.env("editor") === undefined) {
lenis = new Lenis({
lerp: 0.1,
wheelMultiplier: 0.7,
gestureOrientation: "vertical",
normalizeWheel: false,
smoothTouch: false
});
function raf(time) {
lenis.raf(time);
requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
}
$("[data-lenis-start]").on("click", function () {
lenis.start();
});
$("[data-lenis-stop]").on("click", function () {
lenis.stop();
});
$("[data-lenis-toggle]").on("click", function () {
$(this).toggleClass("stop-scroll");
if ($(this).hasClass("stop-scroll")) {
lenis.stop();
} else {
lenis.start();
}
});
</script>
To apply this effect to your Webflow website, simply follow the instructions written in the comments of the code. See visual examples below.
These code snippets provided will get the job done, but if you're interested in reading more information and or play with the settings, you can visit the official Lenis Smooth Scrolling GitHub docs and look for the section that says "Instance settings."
Adding Lenis To Your Webflow Project
In Webflow, you'll want to add the "Lenis Smooth Scrolling Styles" just before the </head> closing tag in your project settings.
Then, you'll want to add the "Calling Lenis" and "Lenis Settings & Switches" just before the </body> closing tag in your project settings.
Save the code and publish your site to see smooth scrolling in action!
