GSAP

About

Lenis is a smooth scrolling library for React. This provider integrates the Lenis smooth scrolling library, adding compatibility with Gsap ScrollTrigger module.

Demo

Gsap Lenis Scroll

Scroll this page to see the lenis scroll in action

Installation

Install the following dependencies:

npm install lenis gsap

pnpm add lenis gsap

yarn add lenis gsap

bun add lenis gsap

Copy and paste the following code into your project.

providers/LenisProvider.tsx

'use client'
import React, {PropsWithChildren, useEffect} from 'react'
import {ReactLenis} from 'lenis/react'
import {gsap} from 'gsap'
import {ScrollTrigger} from 'gsap/ScrollTrigger'

const LenisProvider = ({children}: PropsWithChildren) => {
  useEffect(() => {
    const lenis = (window as any).lenis

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

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

      gsap.ticker.lagSmoothing(0)
    }
  }, [])

  return (
    <ReactLenis root>
      {children}
    </ReactLenis>
  )
}

export default LenisProvider

Usage

import LenisProvider from "@/providers/LenisProvider";

app/layout.tsx

<LenisProvider>{children}</LenisProvider>

Common Issues

Nested Scrolls

If you have nested scrolls, you can add the data-lenis-prevent attribute to those scroll containers, to prevent them from being affected by the Lenis smooth scrolling.


// Root scroll
<LenisProvider>
<div 
  className="nested-scrollable-container"
  data-lenis-prevent // Prevent lenis scroll
>
</div>

</LenisProvider>

Gsap Lenis provider