This template includes Lenis Smooth Scroll, a lightweight scrolling system that enhances the overall feel of the website by creating smoother, more refined motion on desktop, while maintaining fast and natural scrolling behavior on mobile devices. The goal is to give the interface a more polished, high-end experience without affecting performance.The script runs automatically on every page and does not require any setup. It has been added inside each page’s Before </body> custom code section in Webflow, ensuring it loads correctly across the entire project.The implementation works by initializing a Lenis instance with specific parameters that control how the scrolling behaves. The “smooth” option enables the interpolation effect, making scroll transitions softer. The “lerp” value defines how fluid the motion feels — lower values create a more cinematic and delayed movement, while higher values feel faster and more responsive. The “wheelMultiplier” controls how sensitive the scroll is when using the mouse wheel or trackpad, and “infinite” is disabled to prevent looped scrolling.If you want to customize the smooth scrolling behavior, you can easily adjust these values directly inside the script. Increasing the “lerp” value will make scrolling feel tighter and more immediate, while decreasing it will create a slower, more premium feel. Adjusting the “wheelMultiplier” will make scrolling faster or slower depending on your preference. For example, a higher value will increase scroll speed, while a lower value will reduce it.The script also uses a requestAnimationFrame loop to continuously update the scroll position in sync with the browser’s rendering cycle. This ensures consistent performance and eliminates stuttering during scroll interactions.For more advanced use cases, the template supports optional control attributes that allow you to manage scroll behavior dynamically. By adding “data-lenis-start”, “data-lenis-stop”, or “data-lenis-toggle” to specific elements, you can enable, disable, or toggle smooth scrolling when needed. This is especially useful when working with menus, modals, or overlays where you may want to temporarily pause background scrolling.If further customization is needed, you can modify the parameters directly in the script or explore additional configuration options in Lenis’ official documentation.
<script src="https://unpkg.com/lenis@1.1.20/dist/lenis.min.js">
</script> <script> const lenis = new Lenis({ smooth: true, lerp: 0.1, wheelMultiplier: 1, infinite: false });
function raf(time) { lenis.raf(time); requestAnimationFrame(raf); } requestAnimationFrame(raf); </script>