Smooth Scrolling with lenis: A Full Guide

What is Lenis:

It's an easy-to-use modern library for implementing smooth scrolling in web pages, it abstracts the complexities of achieving smooth scrolling effects by providing a clean API to work with.

Check The Official Website

Key Features:

• Lightweight: Lenis is a lightweight library which is crucial for performance and speed.
• Easy to use: the API is super easy to use as we'll see in the coming sections.
• Performance: It was developed with performance mind, providing smooth effects without affecting the website speed.
• Customization: Customize scrolling effects based on your needs.

Why use Lenis js:

1. Enhanced User Experience

   Smooth scrolling create a polished professional experience for websites. reduces bumpy transitions and improves the user experience.

2. Accessibility

   Lenis Ensures not only appealing smooth scrolling but also accessibility. It handles different input methods gracefully. Making all users have a consistent experience.

3. Ease of use

   The API is super easy to use and you do not need to worry about the scrolling mechanisms.

4. Customization

It allows to tune the scroll behavior based on your needs. (ex: smoothness, easing,speed, etc.)

Lenis Example With React

Let's create a smooth scrolling example using Lenis and React.

Step 1: Install Lenis

Using NPM:

npm i lenis

Using Yarn:

yarn add lenis

Step 2: Basic Setup

Create a Custom Hook to facilitate the process

// ./hooks/useLenisScroll.js
import { useEffect } from "react";
import Lenis from "lenis";
 
const useLenisScroll = () => {
  useEffect(() => {
    const lenis = new Lenis({
      duration: 1.2,
      easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
      direction: "vertical",
      smooth: true,
    });
 
    const raf = (time) => {
      lenis.raf(time);
      requestAnimationFrame(raf);
    };
 
    requestAnimationFrame(raf);
 
    return () => {
      lenis.destroy();
    };
  }, []);
};
 
export default useLenisScroll;

Step 3: Use The Hook

Now let's use the hook in the wanted component in order to create smooth scrolling.

In the example I'll put it in the App component. to ensure smooth scrolling in the whole app.

// ./App.js
import React from "react";
import useLenisScroll from "./hooks/useLenisScroll"; // Change the path to your custom hook
 
const App = () => {
  useLenisScroll();
 
  return (
    <div>
      <header>
        <h1>Welcome to My Smooth Scrolling Site</h1>
      </header>
      <main>
        <section>
          <p>Your content here...</p>
        </section>
        <section>
          <p>More content...</p>
        </section>
      </main>
    </div>
  );
};
 
export default App;

This setup enables smooth scrolling with minimal configuration.

Advanced Usage

Custom Scroll Behavior

If you want to change some of the default behavior, you can do it with ease. In this example I will change the scroll direction to horizontal.

const lenis = new Lenis({
  duration: 1.5,
  easing: (t) => Math.sin(t * (Math.PI / 2)),
  direction: "horizontal",
  smooth: true,
});

Check the official Documentation for more details.

Controlling scroll with JavaScript

Here a simple example to control the scroll with JavaScript. using Lenis methods

lenis.scrollTo("#target-section");

This feature is particularly useful for creating scroll-based navigation or dynamic effects that respond to user interactions.

Conclusion

Lenis is a powerful solution for smooth scrolling. It's a lightweight library that provides a smooth and intuitive experience for websites. It's also easy to use and customizable.

Happy Hacking!