Instructions

The template loosely follows Client-first naming convention.

Guidelines:

  • Consider deleting the template logo & replacing it with yours.
  • You can easily edit texts on the edit mode of Webflow.
  • For details case studies/blog posts you need to use the rich text element properly, consider checking the tutorial how to edit rich texts

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/lenis@1.3.4/dist/lenis.min.js"></script> 
<link rel="stylesheet" href="https://unpkg.com/lenis@1.3.4/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.