Lenis Smooth Scroll: step-by-step guide to Webflow integration

Introduction

Smooth scrolling is a technique which - as the name suggests - smoothes the scrolling of a web page. In concrete terms, the effect makes scrolling the page much smoother and less jerky.

Smooth scrolling may be difficult to describe, but it can make for a much more pleasant and memorable browsing experience. It's no coincidence that this effect can be found on many Awwwards sites.

Lenisis a Javascript library that lets you add just such an effect to your projects. An ultra-lightweight, high-performance solution, it can be easily implemented in the Webflow ecosystem while eliminating a major drawback of other smooth scrolling libraries.

In today's article, we'll see:

• Why choose Lenis to add smooth scrolling to your Webflow projects?
• What CSS property can finally be used with smooth scroll thanks to Lenis?
• How to implement Lenis step by step in your Webflow project.

Let's discover how to create captivating web experiences in your Webflow projects thanks to Lenis' fluid scrolling. Let's get started!

Why choose smooth scrolling with Lenis

To add smooth scrolling to a Webflow project, there are several Javascript libraries, but Lenis is the first choice for several reasons:

• Performance and lightness: Performance has long been a compromise when it comes to adding a smooth scrolling effect to a project. The main advantage of Lenis is that it's an ultra-light library (3Kb), ensuring excellent performance.
• Sticky position at last usable:The other major advantage of Lenis is that it enables the use of the CSS property position: sticky, sometimes indispensable in a design but incompatible with other smooth scrolling libraries.
• Adapted and accessible experience: Thanks to its lightness and performance, Lenis offers a seamless experience whatever the user's environment. Lenis is also positioned as an accessible solution, which is not necessarily the case with other libraries.
• Customizing the experience:Finally, another plus point is the ability to customize the scrolling experience: you can control the level of added fluidity, scroll speed and other options according to the specific needs of the project.

In short, Lenis is a complete solution: lightweight, high-performance and customizable to your needs. This, combined with its ease of implementation, makes it an ideal solution for your Webflow projects.

In the next section, we'll look at just this last point: how to implement Lenis step by step in a Webflow project.

How to integrate Lenis step by step into a Webflow project

Integrating Lenis into a Webflow project is both quick and easy. Follow the steps below to give your website an optimal scrolling experience.

1) Add the recommended CSS

To start with, Lenis recommends the addition of a few lines of CSS to ensure compatibility, offer optimal use of the library, and unlock some functionality with HTML attributes (discussed later in this article).

To add this CSS code :

• Go to your Webflow project settings (Project Settings),
• Then open the Custom Code tab,
• Paste the following CSS code into 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 find out 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 to your Webflow project settings (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 smooth scrolling on your project. After the installation script, paste the following script in the Footer Code of the site parameters:

<script>

const lenis = new Lenis({
  // Valeur entre 0 et 1
  // Valeur par défaut : 0,1
  // Plus la valeur est faible, plus le scroll sera fluide
  lerp: 0.05, 
  // Valeur par défaut : 1
  // Plus la valeur est haute, plus le défilement sera rapide 
  wheelMultiplier: 1, 
});

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

</script>

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

• lerp: controls scroll smoothness, with a value between 0 and 1 (0.1 by default). The lower the value, the smoother the scroll. In our experience, we recommend a value of around 0.05.
• wheelMultiplier: controls scrolling speed: the higher the value, the faster the scrolling and vice versa (default setting: 1). Unless you have very specific needs, we recommend that you leave this value as it is, so as not to disrupt the user experience.

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

Finally, in the next section, we take a look at some simple and practical functions based on HTML attributes, which 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 up in your JavaScript code for precise control of 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 according to the specific needs of your design:

• data-lenis-stop: stops scrolling when the element is clicked,
• data-lenis-start: activates scrolling when the element is clicked,
• data-lenis-toggle: alternates between blocking and restarting the scroll when the element is clicked (can be useful on a menu button, for example),
• data-lenis-prevent: maintains scrolling in elements with an overflow: auto or overflow: scroll property.

Find out how each of these attributes works on this Timothy Ricks cloneable.

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

• From the Designer, select an element and access the Settings tab on the right-hand panel.
• Scroll down the Custom Attribute sub-tab and click on the + icon.
• Enter the attribute in the Name field and leave the Value field empty.

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

Conclusion

In conclusion, Lenis is the solution of choice for adding smooth scrolling to your Webflow projects.

Its light weight guarantees excellent performance, its support for position: sticky means that smooth scrolling can be combined with more creative designs, and its ease of implementation makes it easier to create more memorable user experiences.

If you liked the article, go further with the following articles:

• GSAP x Webflow: how to easily create your first GSAP animations
• 3 tips for creating GSAP animations in 2024
• Splide JS guide: create advanced sliders with ease in Webflow
• 7 useful CSS custom codes to enhance your Webflow projects