Smooth Scrolling with Lenis and Clean Transitions in React

Why Native Browser Scrolling Falls Short

Standard browser scroll behavior depends on operating system settings and hardware configurations. On Windows machines without precision trackpads, scrolling often feels abrupt and disjointed. When building high-end interfaces like the [Yacht Rentals / Sea Cross](/projects/10) platform, predictable and clean motion is crucial for creating a premium feel without hurting accessibility or performance.

To solve this, developers use inertial scroll libraries. Among modern options, Lenis stands out for its lightweight footprint, lack of heavy dependencies, and precise control over easing curves.

Setting Up Lenis in a React Application

Integrating Lenis into a React component requires managing the requestAnimationFrame loop properly. Below is a clean, production-ready custom hook and provider setup that initializes Lenis and connects it with GSAP if your project requires scroll-triggered animations.

import React, { useEffect } from 'react';
import Lenis from '@studio-freight/lenis';

interface SmoothScrollProps {
  children: React.ReactNode;
}

export default function SmoothScrollProvider({ children }: SmoothScrollProps) {
  useEffect(() => {
    const lenis = new Lenis({
      duration: 1.2,
      easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
      direction: 'vertical',
      gestureDirection: 'vertical',
      smooth: true,
      mouseMultiplier: 1,
      smoothTouch: false,
      touchMultiplier: 2,
    });

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

    requestAnimationFrame(raf);

    return () => {
      lenis.destroy();
    };
  }, []);

  return <>{children}</>;
}

Handling Anchor Links and Focus States

A common pitfall with custom scroll libraries is broken anchor tag navigation and keyboard accessibility. Because Lenis intercepts default scroll behavior, standard HTML anchor jumps (`href="#section"`) will not animate correctly out of the box.

To fix this, capture click events on internal anchor links and call the Lenis scrollTo method explicitly:

const handleScrollTo = (targetId: string) => {
  const targetElement = document.getElementById(targetId);
  if (targetElement && lenisInstance) {
    lenisInstance.scrollTo(targetElement, {
      offset: 0,
      duration: 1.5,
      easing: (t) => 1 - Math.pow(1 - t, 3),
    });
  }
};

Checklist for Clean Web Design and Interactions

• Disable smooth touch scrolling on mobile devices if native momentum feels more natural to users.
• Test keyboard navigation (Tab and Spacebar) to ensure focus outlines remain visible and scroll position updates correctly.
• Combine Lenis with CSS will-change properties sparingly to prevent GPU layer bloat.
• Ensure your website loads quickly across all devices before adding complex animation layers.

Need Help Implementing This in Your Product?

As an independent web developer based in Navi Mumbai, I build fast, production-ready web applications with clean animations and reliable user interfaces. Explore my [Full-Stack Web Development Services](/services) or [get in touch with Aafaque](/contact) to discuss your project requirements.