Lenis Smooth Scroll: Step-by-Step Integration Guide in Webflow

1) Add the Recommended CSS

To start, Lenis recommends adding a few lines of CSS to ensure good compatibility, optimize the use of the library, and unlock some features via HTML attributes (which we will discuss later in this article).

To add this CSS code:

• Go to the settings of your Webflow project (Project Settings),
• Then open the Custom Code tab,
• Paste the following CSS code in the Head Code section:

<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>

The first step is already complete. Let’s move on to the next step to learn how to install the library on your Webflow project.

2) Add the Installation Script

To install the Lenis library on your Webflow project, add the installation script in the settings of your Webflow project (Project Settings):

<script src="https://unpkg.com/@studio-freight/lenis@1.0.33/dist/lenis.min.js"></script>

3) Configure Lenis

Now that the library is installed, you can configure the smooth scroll for your project. After the installation script, paste the following script into the Footer Code of the site settings:

<script>

const lenis = new Lenis({
  // Value between 0 and 1
  // Default value: 0.1
  // The lower the value, the smoother the scroll
  lerp: 0.05, 
  // Default value: 1
  // The higher the value, the faster the scrolling
  wheelMultiplier: 1, 
});

function raf(time) {
  lenis.raf(time);
  requestAnimationFrame(raf);
}
requestAnimationFrame(raf);

</script>

As indicated in the code, you can configure the scrolling using the following two parameters:

• lerp: controls the smoothness of the scroll. The value should be between 0 and 1 (default 0.1). The lower this value, the smoother the scroll will be. From experience, we recommend a value around 0.05.
• wheelMultiplier: controls the speed of the scroll. The higher this value, the faster the scroll will be, and vice versa (default 1). Unless there’s a very specific need, we recommend leaving this value as is to avoid disrupting the user experience.

By following these simple steps, you can easily integrate Lenis into your Webflow site to offer a smooth and enjoyable scrolling experience.

Finally, in the next section, we discover some simple and practical features that rely on the use of HTML attributes and can be useful in certain situations.

4) Unlock Advanced Features with HTML Attributes

Lenis also offers a few more advanced methods that can be called in your JavaScript code for precise control of the scrolling behavior.

To take advantage of these features, start by adding the following code (shared by Timothy Ricks) to the Lenis configuration script:

$("[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();
  }
});

Next, add the following attributes to your elements based on the specific needs of your design:

• data-lenis-stop: prevents scrolling when the element is clicked,
• data-lenis-start: activates scrolling when the element is clicked,
• data-lenis-toggle: toggles between stopping and starting the scroll when the element is clicked (can be useful for a menu button, for instance),
• data-lenis-prevent: allows scrolling within elements that have an overflow: auto or overflow: scroll property.

Discover how each of these attributes works in this cloneable by Timothy Ricks.

As a reminder, here’s how to add HTML attributes to an element:

• In the Designer, select an element and go to the Settings tab on the right panel.
• Expand the Custom Attribute sub-tab and click the + icon.
• Enter the attribute in the Name field and leave the Value field empty.

Then publish your project, and the feature will be active on the published site.