Effortless Smooth Scrolling: Integrating Lenis for Enhanced Web Experiences

Tired of clunky, jarring scrolls on your website? Discover how Lenis, a lightweight smooth scroll library, can elevate user experience and engagement. This guide provides a deep dive into using Lenis, maximizing its potential for stunning visual effects and seamless navigation.

What is Lenis Smooth Scroll?

Lenis is a Javascript library designed to create fluid and performant smooth scrolling experiences. Forget about the headaches of building custom smooth scrolling from scratch. Lenis offers a robust, optimized solution for modern websites and applications. It can also be used for achieving a parallax scrolling effect and other animations that improves user experience.

Lightweight & Performant: Built for speed and efficiency.
Easy Integration: Seamlessly blends into existing projects.
Versatile: Perfect for WebGL scroll syncing, parallax effects, and more.

Installation: Get Started with Lenis

Adding Lenis to your project is straightforward. Choose the method that fits your workflow.

Package Manager:

npm install @studio-freight/lenis

Using Scripts (CDN):

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

Basic Setup: Implementing Lenis

Initialize Lenis with a few lines of code and unlock smooth scrolling.

const lenis = new Lenis({
  autoRaf: true,
});

lenis.on('scroll', (e) => {
  console.log(e);
});

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

requestAnimationFrame(raf);

Recommended CSS: Styling for a Smooth Experience

Include the Lenis stylesheet for consistent visual styling.

import 'lenis/dist/lenis.css'

<link rel="stylesheet" href="https://unpkg.com/@studio-freight/lenis@1/dist/lenis.css">

Advanced Integration: Lenis with GSAP ScrollTrigger

Synchronize Lenis with GSAP's ScrollTrigger plugin for complex animations tied to scroll position.

const lenis = new Lenis()

lenis.on('scroll', ScrollTrigger.update)

gsap.ticker.add((time)=>{
  lenis.raf(time * 1000)
})

gsap.ticker.lagSmoothing(0)

Troubleshooting: Resolving Common Issues

Encountering problems? Here are some common fixes.

Use the Latest Version: Ensure you're utilizing the most up-to-date Lenis package.
Include Recommended CSS: Correct styling is vital for visual consistency.
Check Scrollability: Before Lenis, confirm your page is naturally scrollable.
autoRaf or Manual Call: use autoRaf: true or call lenis.raf(time) manually.

Diving Deeper: Exploring Lenis Features

Lenis offers a range of features to tailor the scrolling experience.

Nested Scroll: Manage scrolling within containers with the prevent option.
Anchor Links: Enable smooth navigation to specific sections of your page.