Elevate Your Website’s Scroll Experience with Lenis: A Step-by-Step Guide for WordPress Integration

Adding Lenis library to a WordPress website involves a few steps. Here’s a guide on how to do it:

Step 1: Accessing the WordPress Dashboard

Login to your WordPress admin dashboard.

Step 2: Adding CSS Code

In the dashboard, go to “Appearance” and then click on “Theme Editor.”
Locate your theme’s stylesheet file (usually named style.css).
Insert your CSS code at the end of the file. Make sure you are within the appropriate HTML and CSS tags.

/**
Lenis
*/
html.lenis {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

Step 3: Adding JavaScript Code

Still in the Theme Editor, locate your theme’s footer.php file. This file is typically found in the theme’s main directory.
insert your JavaScript code just before the closing </body> tag.

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

<script>
  /**
   * set lenis scroll
   */
  const lenis = new Lenis({
    duration: 1.2,
    easing: (t) => (t === 1 ? 1 : 1 - Math.pow(2, -10 * t)),
    direction: "vertical",
    gestureDirection: "vertical",
    smooth: true,
    smoothTouch: false,
    touchMultiplier: 2,
  });

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

  requestAnimationFrame(raf);
</script>

Step 4: Check for Lenis Functionality

Visit your WordPress site and check if Lenis is working as expected. If there are any issues, ensure that the Lenis library is loaded correctly, and there are no JavaScript errors in the browser console.

Important Notes:

Make sure to back up your theme files before making any changes.

Always test changes on a staging site before implementing them on a live site.

Keep the Lenis library updated to the latest version for security and feature improvements.

Following these steps should allow you to integrate the Lenis library into your WordPress website successfully.