4. Classes you should not change

To ensure the animation works correctly, do not rename or remove the following classes:

.section_cta

.interaction_visual_wrap

.interaction_img_wrap

.interaction_cms_list

.interaction_cms_item

.interaction_cms-img_img

❗Changing these class names may break the functionality of the script, since they are directly referenced in the code. We recommend you not changing any class inside the component to avoid bugs on the animation.

5. Customizing the animation behavior

🛠 Feel free to experiment with values to match your site’s motion style. Just keep a backup of the original if needed.

Lenis smooth scroll

This template uses Lenis to create a smooth, modern scrolling experience across all pages. Lenis replaces the browser’s default scroll behavior with a more fluid and refined motion, enhancing the feel of animations and transitions throughout the site.

This is handled entirely through custom code added in your Site Settings.

1. Where the code is added

Head tag

In your Webflow Site Settings, under the Custom Code → Head section, the following code loads the Lenis script and stylesheet:

<!-- Lenis script and styles -->
<script src="https://unpkg.com/[email protected]/dist/lenis.min.js"></script> 
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/lenis.css">

This makes the Lenis library available globally across your project.

Before </body> tag

Also in Site Settings, scroll to the Custom Code → Before </body> tag section and you'll see the initialization script:

<!-- Lenis setup -->
<script>
// Initialize Lenis
const lenis = new Lenis({
  smooth: true,
  lerp: 0.1,
  wheelMultiplier: 1,
  infinite: false,
});

// Use requestAnimationFrame to continuously update the scroll
function raf(time) {
  lenis.raf(time);
  requestAnimationFrame(raf);
}

requestAnimationFrame(raf);
</script>

This script starts the smooth scrolling effect and keeps it running as the user interacts with the page.

2. How to disable the animation (optional)

To temporarily disable Lenis without deleting your code:

Comment out both script blocks like this:

<!-- 
ALL THE CODE HERE
-->

This will stop the animation from running but retain the code for later use. You can also just delete the entire code and put it back again if you want to have the smooth scroll in the future.

3. How to adjust the scroll speed

The scroll behavior can be fine-tuned inside the second script:

lerp: 0.1,

This controls how smooth and slow the scroll feels:

Lower values (e.g. 0.05) = slower and smoother
Higher values (e.g. 0.2) = snappier and faster

You can also tweak:

wheelMultiplier: 1,

This controls how sensitive scroll input is on the mouse/touchpad. Increase the value to make it scroll farther with each scroll input.

3. Disabling the animation (optional)