Lenis scroll animation

1. Where the Lenis code is located

Head tag

This template integrates Lenis to deliver a smooth and contemporary scrolling experience throughout the website. Instead of relying on the browser’s default behavior, Lenis introduces a more fluid motion that improves the overall feel of animations and page transitions.
The implementation is managed entirely through custom code added within the Site Settings.

<!-- 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 allows Lenis to run across the whole website without additional setup on individual pages.

Before </body> tag

In Site Settings, navigate to the Custom Code section and locate the area labeled “Before ”. There you’ll find 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 activates the smooth scrolling behavior and ensures it continues running as users navigate and interact with the page.

2. Adjust the Lenis animation

The scrolling behavior can be adjusted within the second script:

lerp: 0.1,

Lower values (e.g., 0.05) result in slower, smoother motion, while higher values (e.g., 0.2) create a quicker and more responsive feel.

You can also modify the sensitivity settings:

lerp: 0.1,

This determines how much distance is covered with each mouse wheel or trackpad interaction — increasing the value makes the page scroll farther per input.