Lenis Smooth Scroll with GSAP in React 19

Achieving a premium, immersive web experience requires escaping the browser's default jagged scrolling behavior. For this portfolio, we integrated Lenis Smooth Scroll and orchestrated animations with GSAP 3.

Setting up Lenis Provider

Since Next.js 14+ heavily relies on Server Components, we must isolate our animation logic into a Client Component boundary.

'use client'
 
import { ReactLenis } from 'lenis/react'
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import { useEffect } from 'react'
 
gsap.registerPlugin(ScrollTrigger)
 
export function SmoothScroll({ children }) {
  useEffect(() => {
    // Sync GSAP ticker with Lenis requestAnimationFrame
    function update(time) {
      gsap.ticker.tick()
    }
    gsap.ticker.add(update)
    return () => gsap.ticker.remove(update)
  }, [])
 
  return (
    <ReactLenis root options={{ lerp: 0.05, duration: 1.2 }}>
      {children}
    </ReactLenis>
  )
}

The useGSAP Hook

In React 19, managing GSAP context and cleanup is crucial. The official @gsap/react package provides the useGSAP hook, which perfectly handles cleanup during React's strict mode double-invocations.

We utilized this to create the parallax headers and text reveal animations that give the site its signature cinematic feel.