Hello,

Because I need to have scroll-behavior: initial it does what it does as default - scroll jump to the target element. So if I want to scroll to element smoothly, I need to catch the click events for anchors and use Lenis.scrollTo(...) to make scroll smooth.

My question is if there are plans to handle this all in Lenis - for example with some parameter (for example { .., smoothAnchors: boolean, ... }) when initializing Lenis instance.

Hello. I tried to install it and build with npm but I cant get a demo html. Please can you tell me what I do wrong? Best regards, Karl

At the time of this issue being opened, the demo site won't load.

• Google Chrome v105.0.5195.125 (also tried incognito)
• MacOS 12.6

Hi its not an issue but just an enquiry is there any inbuilt parallax available for this smooth scroll
thank you

First of all, thanks for the best smooth scrolling library out there! Being able to use position: sticky again is liberating.

I'm trying to setup some anchor links smooth scrolling using Lenis.scrollTo() function, but I'm not sure if I understand how duration and easing works. Here's my current code:

  const scrollButtons = document.querySelectorAll('.button-scroll');
  scrollButtons.forEach(button => {
    button.addEventListener('click', e => {
    	e.preventDefault();
    	var target = button.dataset.target;
      lenis.scrollTo(target, {
      	offset: 0, 
        immediate: false, 
        duration: 3,
        easing: (x) => (x < 0.5 ? 8 * x * x * x * x : 1 - pow(-2 * x + 2, 4) / 2)
      });
    });

The expectation here is to have the anchor link triggering a scroll with 3 seconds of duration, using a easeInOutQuart function for easing. However, the scroll happens extremely fast and the easing function is not applied.

Am I doing something wrong? Can you guys add more details about these properties on the documentation?

Describe the bug
When enabling lenis on 2 of my websites, I get an issue when trying to click the scroll bar and drag it up and down.

To Reproduce
This code is used in my website, also CSS properties for the full height are set.

const lenis = new Lenis({
  duration: 1.2,
  easing: (t) => Math.min(1, 1 - Math.pow(2, -10 * t)),
  direction: 'vertical',
  gestureDirection: 'vertical',
  smooth: true,
  mouseMultiplier: 2,
  smoothTouch: false,
})

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

requestAnimationFrame(raf)

This does not happen with Locomotive scroll for example.
EDIT: Tested with opera 93 (page teleport) and chrome 107 (scroll completely locked)
Also same behaviour on Safari Mac

I'm trying to use Lenis via the script tag, but can't get it to work.
Initialising it with "Lenis" returns this error: Uncaught ReferenceError: Lenis is not defined.

codepen

Hello,

I have used the package and declared lenis object as per documentation in App.js inside an useEffect hook.

useEffect(()=> {
	const lenis = new Lenis({
		lerp: 0.1,
		smooth: true,
	});
	const scrollFn = () => {
		lenis.raf();
		requestAnimationFrame(scrollFn);
	};
	requestAnimationFrame(scrollFn);
 },[])

Now in a page where I have to add a div container with scrolling content, just like in your demo website. I have added same overflow technique with fixed container and content height but its not working on mouseover like that in your demo. I have to click and hold on scroller thumb to scroll down content.

If I remove the lenis declaration from app.js, this container scroll works normally.

Demo:

https://codesandbox.io/embed/recursing-zeh-1z10dm?fontsize=14&hidenavigation=1&theme=dark

Update:

Issue is Fixed. I forgot to add onWheel function to container.

Thanks for simple and very effective package.

I'm strictly unable to scroll to an element without easing and duration, could you please provide an example?

Here is what I tried, without success :

lenis.scrollTo('.section--about--first', {immediate: true})
lenis.scrollTo('.section--about--first', {offset: 0, duration: 0, easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), immediate: true})

How does it need to be witten?

Thank you

I installed using NPM and Webpack and when i try to start, i get this error in console:

Unexpected token (53:11) - You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

Is there any dependence i'm missing or am i installing it wrong?

Would be great to have a precompiled version to use without node or multiple imports.

Good afternoon. Could you please tell me how to add Lenisenis to cdnjs.com ? Just my website is on Tilda builder and I can't install the library via npm

Describe the bug
The scroll distance per wheel event is noticeably less in Firefox (on Ubuntu/Linux) than in Chrome. In Chrome the scroll distance per wheel event feels nice and looks reasenable, but in Firefox the scrolled distance per wheel event is quite a lot less and scrolling feels very slow and cumbersome.

To Reproduce
https://codepen.io/ClementRoche/pen/VwxgZEP

Hey guys !

Just wanting to submit an issue I had.

I figured out where was the problem :

When there is height: 100% set to html, body (I use it on all my projects), the lib is not working.

E.g :

html, body{
  width: 100%;
  height: 100%;
}

A codepen as a DEMO : https://codepen.io/haroldao/pen/OJvgrXy
Normal DEMO (where it's working) : https://codepen.io/haroldao/pen/PoRpqXv

The solution:
Instead of height: 100%, we should set a min-height (min-height: 100%).

E.g :

html, body{
  width: 100%;
  min-height: 100%;
}

Hello,
I noticed a strange behaviour on the direction getter when I scroll down.
It works perfectly except when it stops. His last tick returns -1 instead of 1.

Here's my code :

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

Here's a screenshot of my console

Am I missing something ?
Thank you very much :)

Can you provide a CDN URL so we can import without having to use npm etc.

Thank you for your work.

Hi @studio,

./ path and folder problems in Visual Code, can't get this module running.
Are there other ways to import this .js ?

Thank you

Is it possible to get a working demo from this repo? / Sylvia

Hi, i tried to add scroll-snapping to my HTML and it worked!
But sadly there is an issue while using scroll-snap-align: start;
It always jumps without animation to my next section.
https://css-tricks.com/practical-css-scroll-snapping/#aa-example-3-vertical-full-screen

Can you fix that?

(Love your code!)
Thanks Robin

First of all, thanks for the fantastic plugin.
I wonder if there's an example demonstrating how to correctly implement it in a NextJs project? I followed the doc's basic setup and put it inside a useEffect hook with a return func that destroys the instance on route change, but it seems like nothing works. Any pointers would be greatly appreciated!

here's my setup:

import Lenis from "@studio-freight/lenis";

export default function Home(){

  useEffect(() => {
    if (!lenis) return;
    const lenis = new Lenis({
      duration: 1.2,
      easing: (t) => (t === 1 ? 1 : 1 - Math.pow(2, -10 * t)), // https://easings.net
      smooth: true,
      direction: "vertical",
    });

    const scrollFn = () => {
      lenis.raf();
      requestAnimationFrame(scrollFn);
    };
    requestAnimationFrame(scrollFn);

    return () => {
      if (lenis) {
        lenis.destroy();
      }
    };
  }, []);
}

Describe the bug
Methods setScroll() or scrollTo() won't work due to inertia. If there is a call to one of these methods while scrolling (or having some inertia), it won't work. Or at least it will not reset the right scroll position.

To Reproduce
https://codepen.io/benjaminrobinet/pen/KKeymNV
I added a button on the bottom right of the screen that calls a lenis.setScroll(0). Just try to click it while having inertia: it won't change the scroll position.

Hi! Thanks so much for sharing this to the world, it has been very helpful for me.

I have a question, it is not an issue, however I can't fix it by myself.
I have another script on my page to disable scrolling when a modal is opened. With the Lenis script it doesn't work.
The script looks like this :

<script>
document.addEventListener('DOMContentLoaded', () => {
 document.querySelectorAll('.menu-wrapper').forEach(trigger => {
  trigger.addEventListener('click', function(){ 
    document.querySelectorAll('.body').forEach(target => target.classList.add('no-scroll')); 
    });
 });

 document.querySelectorAll('.menu-wrapper').forEach(trigger => {
  trigger.addEventListener('click', function(){ 
    this.x = ((this.x || 0) + 1)%2; 
    if(!this.x){ 
      document.querySelectorAll('.body').forEach(target => target.classList.remove('no-scroll'));
    } 
    });
 });
});
</script>

I think it would help if I could apply the Lenis script only to my .body class.
How can I achieve that ?
Would you have any other adivce to make this work ?

Thank you in advance !

Hello, can't find anywhere more details on these 3 options:

• smoothTouch: false
• touchMultiplier: 2
• inifinite: false

Can you explain them properly with examples? Thank you.

Hi! First of all loved your presentation at awwwwards!

We are trying to implement Lenis for the first time but we are bumping into no support for keyboard...
Is this something on the roadmap? I guess it wouldn't be too hard to implement right?
Also nice from an accessibility point of view.

Hello, can you have a look at this?

https://github.com/studio-freight/lenis/issues/39#issuecomment-1278327839

Thank you.

I don't know how you keep track of sites that use Lenis, so I'm opening an issue 😄

Here's a brand-new one that I've developed, this time replacing GSAP's ScrollSmoother with Lenis: https://www.heights.agency/
I've added Lenis at an advanced state of the project, and everything went extremely smoothly.

Nice job everyone! 👏

Hi Lenis team,
I'm not able to make horizontal scroll work. Is there something to keep in mind when implementing horizontal scroll?
I have a basic setup with a flex horizontal layout. If it's needed I can provide a codepen.

Should it work out of the box or am I using wrong settings? Thank you.

I have Lenis throughout my website and when a user is typing info in the form, if they hit spacebar, the page scrolls down.

I tested it by removing the smooth scroll and it works. Is there a fix for this? Maybe how to block a section from having smooth scroll?

To see what is happening you can check here:
https://darren-voros.webflow.io/contact

Thank you!

Lenis version: 0.2.0
Browsers: All
OS: Windows

In v0.2.0, Lenis seem to have some kind of a problem, and keep sending endless scroll events, which causes scroll to not happen (as it keep trying to go back up to 0, I assume)

Minimal demo, try scrolling, both mousewheel and scrollbar, and check the console for the endless event being sent:
https://codepen.io/eldzej/pen/oNdXVgR

Been using 0.1.12 to great satisfaction after a ton of issues with LocomotiveScroll, so not sure what happen in v0.2.0

Hi guys, thanks for a great lib!

I noticed that reloading the page while wheel events (trackpad on a Macbook pro) are still coming in, the onscroll returns NaN as value and then scrolling breaks.

You can recreate by scrolling to top on the demo site and quickly reloading at the top:

I'm having an issue doing the following for a page transition:

// Transition animation starts
lenis.stop()

// Transition covers up the page
lenis.scrollTo(0, { immediate: true })

// When the page transition ends after a short time, free the scroll again
lenis.start()

The problem

The problem is that if the user changes the page before the scroll animation reaches its target, the scroll remembers the last point before the scrollTo executes. So when I start it back again it animates from there to the top trying to reach the new target.

You can reproduce it in the following link by pressing the space right before the scroll animation ends.
https://codepen.io/matias4205/pen/MWXWQMa

Hello, I have been using this amazing and simple package for smooth scrolling on various projects. Thanks to all authors and contributors.

Now, problem is that normal zoom-in and zoom-out does not work. Like page does zooms in but it also scrolls the page up and down respectively.

For reference, you can check your own demo as well.

Hi,

Thank you for such a great library.

I was wondering if you could provide any advice on how to get it working as a plugin within a Nuxt3 project. The following is what I have so far for my plugin file lenis.client.js withing the plugins folder of the project

import Lenis from "@studio-freight/lenis";

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

lenis.on("scroll", ({ scroll, limit }) => {
  console.log({ scroll, limit });
});

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

requestAnimationFrame(raf);

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.provide("lenis", lenis);
});

Unfortunately the page stops scrolling and this is what I get on the console on scroll:

Thank you in advance for your help

Hey I wanted to know if it's possible to enable browser touchpad swipe gesture in order to trigger back / next navigation ? It's caused by scroll-behavior: initial;

I've tried Lenis on multiple sites and on all of them I experience a really bad lag. When I scroll it takes 2-3 secs before the script actually scrolls the page.

In the video below you can see when the numbers in the console update that's when I scroll with the mouse wheel, and pay attention after how many secs the page actually scrolls... here's a codepen with the code.

• Chrome: Version 103.0.5060.114 (Official Build) (arm64)
• Brave: Version 1.41.96 Chromium: 103.0.5060.114 (Official Build)

Hey, is it possible to disable Lenis on mobile?

Scroll is returning: {scroll: NaN, limit: 0, velocity: NaN, direction: -1, progress: NaN}

I have no idea, why this isn't working and with no way to debug install works perfectly with scrollSmoother and Locomotive scroll.

Javascript looks like this, set up is really simple. While it is a WP install I have a wrapper and content div that goes around the main html tag, super simple stuff.

Really confused why limit is not assigned, looking at other issues I can see the wheel event called before this can affect the scroll, however I have deleted all other references.

FYI the page does not move at all, any help on debugging this would be great.

` createScroll() {
this.scrollWrapper = document.querySelector('#smooth-wrapper')
this.scrollContent = document.querySelector('#smooth-content')

this.Scroll = new Lenis({
  duration: 1.2,
  wrapper: this.scrollWrapper,
  content: this.scrollContent,
  direction: 'vertical',
  smooth: true,
})

this.Scroll.on('scroll', ({ scroll, limit, velocity, direction, progress }) => {
  console.log({ scroll, limit, velocity, direction, progress })
})

const raf = () => {
  this.Scroll.raf()
  requestAnimationFrame(raf)
}

requestAnimationFrame(raf)

}`

Hey! We noticed the velocity is a bit glitchy when the scroll momentum is about to come to a stop.

The velocity overshoots 0 briefly and switches sign which creates visual glitches when using to animate.

Describe the bug
Currently the types are getting generated without the class extension from tiny-emitter causing typescript to error.

lenis.on('scroll', handleScroll); // Property 'on' does not exist on type 'Lenis'.

Current type output:

export default class Lenis {}

Expected type output (matches implementation):

export default class Lenis extends EventEmitter {}

I've tried solving this myself however I'm not very familiar with JSDoc syntax and couldn't get @typedef {import('tiny-emitter')} EventEmitter to play nicely with @extends EventEmitter.

If it would help I'd be happy to spend the time to migrate it directly to typescript, I didn't want to spend the time without any input from yourselves first.

Hi Studio Freight team,
Nice library, very useful, and game changer for smooth scrolling, thank you to make this beautiful library.
I wonder if we can have a custom scrollbar (because Windows have suck scroll style and ruined the website UI).

What I mean by custom scrollbar is adding new div instead styling -webkit scroll on CSS (because it has limited styling, and depends on browser).
I understand we can make our own by using lenis.on('scroll') function, but it would be great if we have option like example customScroll: true, and automatically create custom div for scrollbar.

Like example Studio Freight projects:

• https://lunchbox.io/
• https://www.getrepeat.io/

Thank you.

Hello,
I'm having trouble with one of my pages consisting of a 400px hero section, an iframe of this magnitude: height: 1547px; width: 1432px; and then my footer, while using Lenis. The height and width of the iframe are loaded right before Lenis is initialized. What is it I might be doing wrong?
Thanks in advance.

Hi there!

There is an Application error: a client-side exception has occurred) when you scroll to the top on iOS (Safari).

Demo:

How can I make fixed positioned div actually scroll? It works without Lenis
Pen: https://codepen.io/stdusan/pen/YzLzZgg

Hi!

After using the scroll callback, I've been wondering if the returned direction parameter should output the direction of the user's scroll input instead of the global instance direction.

Current behavior

import Lenis from '@studio-freight/lenis'

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

lenis.on('scroll', ({ direction }) => {
  	console.log({direction}); // In that case, it'll always return `vertical` (lenis.direction)
})

Suggested behavior

import Lenis from '@studio-freight/lenis'

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

lenis.on('scroll', ({ direction }) => {
  console.log({direction}); // returns `1` or `-1`. Based on user scroll event
})

Would return 1 or -1 depending if the user is scrolling up and down (vertical) or left and right (horizontal).

I think this solution would make more sense since all other properties of that event are related to a scroll action, not the global instance.

Workaround

I've found a workaround to reproduce the suggested behavior. But I would like to know your thoughts on having this behavior built-in the library!

import Lenis from '@studio-freight/lenis'

let scrollDirection = 1
let lastProgress = 0

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

lenis.on('scroll', ({ progress }) => {
	//get direction
	if (progress > lastProgress) {
		if (scrollDirection != 1) {
			scrollDirection = 1;
		}
	} else {
		if (scrollDirection != -1) {
			scrollDirection = -1;
		}
	}
})

How do I do it when I reload doesn't save the scroll position, I want to start from the beginning/top

Describe the bug
Not necessarily a bug and this is minor but I believe it would be good to use Event.composedPath() as Event.path is deprecated, as the Issues tab on the Chrome Tools notices so.

To Reproduce
Just use Lenis, Chrome returns this error:

Event.path is deprecated and will be removed. Please use Event.composedPath() instead.
1 source: @studio-freight_lenis.js:249

I'm using this with r3f and I noticed 200+ console logs a second when I do something like lenis.on('scroll', (scroll)=>{console.log)). Should we limit it to like 30 a second?

I noticed an error in the console that does not appear in Chrome v106, but it does appear in Chrome v109, but mostly in Firefox (v 106), Firefox Developer (v107), Firefox Nighly (v 108).

Pen: https://codepen.io/gyurmey2/pen/NWMErqQ

Hi Mr Clementroche,

First of all thank you for this great smooth scroll which is open source really appreciated i have a question
How do i use in nuxt, i tried but when route change the scroll position is didn't go top it stick to the same position as the previous page.
hope you understand my problem please guide me on this thank you.