haroldao / lenis

How smooth scroll should be

Home Page:https://lenis.studiofreight.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

LENIS

Introduction

🚧 Still in WIP, API might change with new releases 🚧

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


Features

  • Performant
  • Lightweight (~2Kb gzipped)
  • Run scroll in main thread
  • Accessibility (CMD+F page search, Tab and arrow navigation, keep scroll position on page refresh, etc.)
  • External RAF
  • SSR proof

Installing

just the usual:

$ npm i @studio-freight/lenis

or replace npm with your package manager of choice :)


Setup

import Lenis from '@studio-freight/lenis'

const lenis = new Lenis({
  lerp: 0.1,
  smooth: true,
  direction: 'vertical',
})

//get scroll value
lenis.on('scroll', ({ scroll, limit }) => {
  console.log({ scroll, limit })
})

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

requestAnimationFrame(raf)

Methods

  • raf() : must be called every frame for internal function.
  • scrollTo(target, {offset}) : scroll to a target.
    • target : can be Number, NodeElement or String (CSS selector).
    • offset : (Number) equivalent to scroll-padding-top.
  • on(id, callback) : execute a function on event.
    • id : event to listen.
      • scroll : return scroll position.
    • callback({scroll, limit}) : function to execute.
  • stop() : pause the scroll
  • start() : resume the scroll
  • destroy() : destroy the instance, remove all events.

Considerations

Things to consider if you want to add Lenis to your codebase will be listed here.

Make sure scroll-behavior is set to initial or not set at all (thanks @thagxt)

html {
  scroll-behavior: initial;
}

Lenis in use


Authors

This set of hooks is curated and maintained by the Studio Freight Darkroom team:


License

The MIT License.

About

How smooth scroll should be

https://lenis.studiofreight.com


Languages

Language:JavaScript 100.0%