How to Make Your Website Scroll Smoothly

One of the most common compliments I receive about my website is how smooth it feels. Smooth scrolling makes your website more appealing for many visitors.

In this tutorial, I’ll show you how to implement smooth scrolling in both Vanilla JavaScript and React using Lenis. Lenis is a 100% free and open-source project, built to enhance web experiences.

Vanilla JS

First, include the CDN link from the Lenis Github page

<script src="https://unpkg.com/lenis@1.3.4/dist/lenis.min.js"></script>

Then, initialize Lenis in your script:

<script>
      const lenis = new Lenis({
        autoRaf: true,
      });
</script>

That's it!

React

First, install Lenis using npm:

npm i @studio-freight/react-lenis

Then, import the library into the designated page or or into App.jsx if you want it to apply across the entire website.

import { ReactLenis } from "@studio-freight/react-lenis";

After that, simply wrap your page or website with the following tag:

import { ReactLenis } from "@studio-freight/react-lenis";

export default function App() {
  return (
    <ReactLenis root>
      <div className="page">
      </div>
    </ReactLenis>
  );
}

It’s as simple as that!

Lenis offers even more capabilities, you can integrate it with GSAP's ScrollTrigger to create advanced scroll based animations. You can also adjust its settings and attributes to tune the smoothness and behavior. Visit their website or their Github page to create more advanced stuff. I might also create more tutorials on Lenis in the future.

Good luck!