Lenis smooth scroll library with with GSAP

Website – https://lenis.darkroom.engineering/

Setup – https://github.com/darkroomengineering/lenis?tab=readme-ov-file

CDN Script

<!-- Lenis JS for smooth scroll -->
<script src="https://unpkg.com/[email protected]/dist/lenis.min.js"></script> 

Setup

Basic:

const lenis = new Lenis()

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

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

requestAnimationFrame(raf)

Add the following CSS to your project:

html.lenis, html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

GSAP ScrollTrigger:

const lenis = new Lenis()

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

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

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

gsap.ticker.lagSmoothing(0)

Examples

See the Pen Lenis Scroll with GSAP ScrollTrigger Pinning by Puneet Sharma (@webdevpuneet) on CodePen.

See the Pen Test Gsap ScrollTrigger + Lenis by Puneet Sharma (@webdevpuneet) on CodePen.

See the Pen Text Scroll Animations with Lenis and GSAP by Puneet Sharma (@webdevpuneet) on CodePen.

See the Pen Reveal text on scroll [GSAP SmoothTrigger + Lenis] by Denis Gusev (@gusevdigital) on CodePen.