Lenis

How smooth scroll should be

ScrollingAnimation
darkroomengineering/lenislenis.studiofreight.com@studio-freight/lenis

README

lenis


Introduction


This is our take on smooth scroll, lightweight, hard-working, smooth as butter scroll. See Demo.



Installation


JavaScript


using a package manager:

  1. ```bash
  2. npm i @studio-freight/lenis
  3. ```
  1. ```js
  2. import Lenis from '@studio-freight/lenis'
  3. ```



using scripts:

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




Setup


Basic:


  1. ```js
  2. const lenis = new Lenis()

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

  8. function raf(time) {
  9.   lenis.raf(time)
  10.   requestAnimationFrame(raf)
  11. }

  13. requestAnimationFrame(raf)
  14. ```

GSAP ScrollTrigger:

  1. ```js
  2. const lenis = new Lenis()

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

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

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

  14. gsap.ticker.lagSmoothing(0)
  15. ```

React:

See documentation for react-lenis.







Instance settings


OptionTypeDefaultDescription
|---|---|---|---|
`wrapper``HTMLElement,`window`The
`content``HTMLElement``document.documentElement`The
`eventsTarget``HTMLElement,`wrapper`The
`lerp``number``0.1`Linear
`duration``number``1.2`The
`easing``function``(t)The
`orientation``string``vertical`The
`gestureOrientation``string``vertical`The
`smoothWheel``boolean``true`Whether
`syncTouch``boolean``false`Mimic
`syncTouchLerp``number``0.075`Lerp
`touchInertiaMultiplier``number``35`Manage
`wheelMultiplier``number``1`The
`touchMultiplier``number``1`The
`normalizeWheel``boolean``false`Normalize
`infinite``boolean``false`Enable
`autoResize``boolean``true`Resize