Instructions

This template includes Lenis Smooth Scroll, a lightweight JavaScript library that provides a smoother, more fluid scrolling experience throughout the website.

The smooth scrolling effect is enabled globally through the template's custom code settings, so it applies to all pages automatically. You can customize its behavior or disable it at any time by following the instructions below.

Smooth Scrolling Customization

‍

Where to Find the Code:

‍

  1. Open your project in Webflow.
  2. Go to Site settings → Custom code.
  3. Locate the code in the Head code or Footer code section, depending on where it was added.
  4. Find the Lenis script and its configuration.

‍

Important: Since this code is added to the global custom code settings, any changes will affect all pages across the website.

‍

How to Customize Smooth Scrolling:

‍

Inside the Lenis initialization script, you will find the following configuration:

const lenis = new Lenis({
 smooth: true,
 lerp: 0.1,
 wheelMultiplier: 1,
 infinite: false,
});

‍

You can adjust the following settings to customize the scrolling experience:

‍

  • smooth: true — Enables the smooth scrolling behavior. Change it to false to disable this behavior through the configuration.
  • lerp: 0.1 — Controls the interpolation factor, which affects how smoothly the scrolling movement catches up with the scroll position. Lower values generally create a softer, slower response, while higher values create a quicker response. Try values between 0.05 and 0.2.
  • wheelMultiplier: 1 — Controls the scroll speed in response to mouse wheel input. Increase the value for faster scrolling or decrease it for slower scrolling. For example, 1.2 increases the multiplier, while 0.8 reduces it.
  • infinite: false — Keeps scrolling within the normal page boundaries. Change it to true only if you want to experiment with continuous, looping scroll behavior.

‍

How to Disable Smooth Scrolling Completely:

‍

If you prefer the browser's default scrolling behavior, remove or comment out the Lenis initialization script and its animation loop. You should also remove the Lenis stylesheet and external script reference if you no longer need the library.

Alternatively, you can remove the entire Lenis code block from the global custom code settings to disable the feature throughout the website.

‍

Save and Publish Your Changes:

‍

After editing the code:

  1. Save your changes in Webflow.
  2. Publish the website to apply the updated custom code.
  3. Open the published website and test the scrolling behavior on different pages and devices.

‍

Tip: Make small adjustments to one setting at a time and preview the results before publishing. This makes it easier to find the scrolling behavior that best matches your design.