@studio-freight/lenis-test

v0.1.1

Published

8 months ago

[![LENIS](https://assets.darkroom.engineering/lenis/header.png)](https://github.com/darkroomengineering/lenis)

Downloads

0High
0Medium
0Low

scroll smooth lenis react

Introduction

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

Installation

JavaScript

using a package manager:

npm i lenis

import Lenis from 'lenis'

using scripts:

<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)

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)

React:

See documentation for lenis/react.

Instance settings

| Option | Type | Default | Description | |----------------------|-----------------------|----------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------| | wrapper | HTMLElement, Window | window | The element that will be used as the scroll container | | content | HTMLElement | document.documentElement | The element that contains the content that will be scrolled, usually wrapper's direct child | | eventsTarget | HTMLElement, Window | wrapper | The element that will listen to wheel and touch events | | lerp | number | 0.1 | Linear interpolation (lerp) intensity (between 0 and 1) | | duration | number | 1.2 | The duration of scroll animation (in seconds). Useless if lerp defined | | easing | function | (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)) | The easing function to use for the scroll animation, our default is custom but you can pick one from Easings.net. Useless if lerp defined | | orientation | string | vertical | The orientation of the scrolling. Can be vertical or horizontal | | gestureOrientation | string | vertical | The orientation of the gestures. Can be vertical, horizontal or both | | smoothWheel | boolean | true | Whether or not to enable smooth scrolling for mouse wheel events | | syncTouch | boolean | false | Mimic touch device scroll while allowing scroll sync (can be unstable on iOS<16)
| syncTouchLerp | number | 0.075 | Lerp applied during syncTouch inertia | | touchInertiaMultiplier | number | 35 | Manage the the strength of syncTouch inertia | | wheelMultiplier | number | 1 | The multiplier to use for mouse wheel events | | touchMultiplier | number | 1 | The multiplier to use for touch events | | normalizeWheel | boolean | false | Normalize wheel inputs across browsers (not reliable atm) | | infinite | boolean | false | Enable infinite scrolling! (See example) | | autoResize | boolean | true | Resize instance automatically based on ResizeObserver. If false you must resize manually using .resize() |

Instance Props

| Property | Type |-------------------------|-- | animatedScroll | dimensions | direction | emitter | options | targetScroll | time | actualScroll | velocity | isHorizontal | isScrolling (getter) | isSmooth (getter) | isStopped (getter) | limit (getter) | progress (getter) | rootElement (getter) | scroll (getter) | className (getter) | Description | -------------|-------------------------------------------------------------| | number | Current scroll value | | object | Dimensions instance | | number | 1: scrolling up, -1: scrolling down | | object | Emitter instance | | object | Instance options | | number | Target scroll value | | number | Time elapsed since instance creation | | number | Current scroll value registered by the browser | | number | Current scroll velocity | (getter) | boolean | Whether or not the instance is horizontal | | boolean | Whether or not the scroll is being animated | | boolean | Whether or not the scroll is animated | | boolean | Whether or not the user should be able to scroll | | number | Maximum scroll value | | number | Scroll progress from 0 to 1 | | HTMLElement | Element on which Lenis is instanced | | number | Current scroll value (handles infinite scroll if activated) | | string | rootElement className |

Instance Methods

| Method | Description | Arguments | |-----------------------------|---------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | raf(time) | Must be called every frame for internal usage. | time: in ms | | scrollTo(target, options) | Scroll to target. | target: goal to reachnumber: value to scroll in pixelsstring: CSS selector or keyword (top, left, start, bottom, right, end)HTMLElement: DOM elementoptionsoffset(number): equivalent to scroll-padding-toplerp(number): animation lerp intensityduration(number): animation duration (in seconds)easing(function): animation easingimmediate(boolean): ignore duration, easing and lerplock(boolean): whether or not to prevent the user from scrolling until the target is reachedforce(boolean): reach target even if instance is stoppedonComplete(function): called when the target is reached | | on(id, function) | id can be any of the following instance events to listen. | | | stop() | Pauses the scroll | | | start() | Resumes the scroll | | | resize() | Compute internal sizes, it has to be used if autoResize option is false. |
| destroy() | Destroys the instance and removes all events. |

Instance Events

| Event | Callback Arguments | |----------|--------------------| | scroll | Lenis instance |

Recommended CSS

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-scrolling iframe {
  pointer-events: none;
}

Considerations

Nested scroll

<div data-lenis-prevent>scroll content</div>

<div data-lenis-prevent-wheel>scroll content</div>

<div data-lenis-prevent-touch>scroll content</div>

See modal example

Anchor links

<a href="#anchor" onclick="lenis.scrollTo('#anchor')">scroll to anchor</a>

Limitations

no support for CSS scroll-snap
capped to 60fps on Safari (source) and 30fps on low power mode
smooth scroll will stop working over iframe since they don't forward wheel events
position fixed seems to lag on MacOS Safari pre-M1 (source)

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme