How to add smooth scroll effect for WordPress sites using Lennis js

Smooth scroll effect for wordpress sites – Smooth scrolling can significantly enhance the user experience of a website, providing a fluid and visually pleasing transition between sections. In this article, we’ll show you how to add a smooth scroll effect to your WordPress site using the Lenis JS library.

First experience the smooth scroll setup with lennis js. Smooth scroll with lennis js demo

Step 1: What is Lenis JS?

Lenis JS is a lightweight, modern JavaScript library that simplifies smooth scrolling on websites. Unlike some traditional scroll libraries, Lenis offers better control over scroll behavior and works seamlessly across different devices, ensuring a smooth user experience.

Step 2: Enqueue Lenis JS in WordPress

For best practices, use child theme and setup style.css and script.js basic files to add smooth scrolling.

<script src="https://unpkg.com/@studio-freight/lenis@1.0.33/dist/lenis.min.js"></script>

Add these lines of code in the header.php head tag to apply to all pages.

Step 3: Enqueue script.js and style.css in your theme using the functions.php file:

function enqueue_global_styles() {
    $stylesheet_uri = get_template_directory_uri() . '/style.css';
    $stylesheet_version = filemtime(get_template_directory() . '/style.css'); // Use filemtime for versioning
    wp_enqueue_style( 'global_styles', $stylesheet_uri, array(), $stylesheet_version );
	
	 $script_uri = get_template_directory_uri() . '/script.js';
$script_version = filemtime(get_template_directory() . '/script.js'); // Use filemtime for versioning
wp_enqueue_script( 'global_scripts', $script_uri, array(), $script_version, true );

}
add_action( 'wp_enqueue_scripts', 'enqueue_global_styles', 20 );  

For my theme, i am loading like this.

Step: 4 Add css and script code to add a smooth scroll effect for your WordPress site

Style.css

html.lenis {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}

Script.js

const lenis = new Lenis({
  // Valeur entre 0 et 1
  // Valeur par défaut : 0,1
  // Plus la valeur est faible, plus le scroll sera fluide
  lerp: 0.05, 
  // Valeur par défaut : 1
  // Plus la valeur est haute, plus le défilement sera rapide 
  wheelMultiplier: 1, 
});

function raf(time) {
  lenis.raf(time);
  requestAnimationFrame(raf);
}
requestAnimationFrame(raf);

if you are not creating a script. js use <script> <script> Add inside body to work and you can also use any plugins for custom code.

comment for any doubt. Get the code from here.