Lenis with barbaJS : Don't stop scroll with .stop()

[dngraphisme]

Describe the bug Hello @clementroche , Thank you for your mibrary it's great, I use it everywhere :)

I have such a strange problem with barbaJS 2.9.7. I work with webpack v5.89

I initiate lenis before barbaJS.

But then even with .stop(), if I change pages, it adds class to the html but I can still scroll

Have you ever had this ?

---

firstLoad: function () {

        console.log('firstLoad')

        // init objectGlobal
        init.objectGlobal();

        init.lenis();

}

then barbaJS

barba: function () {
barba.hooks.beforeLeave(function (data) {
let smoothScroll = init.lenis();
smoothScroll.stop();
}
}

After change page : HTML has class lenis-stopped > but I can still scroll the page :(

Thanks Nicolas

[clementroche]

First of all, please provide a minimal reproduction link. Are you recreating a new Lenis on page change ? If so you must destroy the previous one.

In addition if you have the CSS, it automatically prevent scrolling when lenis is stopped

[dngraphisme]

Hello @clementroche ,

Thank you for your reply. No I am not recreating.

1. I created Lenis for the first time

2. I stop when barba plays the hook.beforeLeave

3. I restart at hooks.enter

This is really the basic behavior but it doesn't do what it should.

Difficult to do a demo I am a webpack stack on wordpress :/

[clementroche]

Without demo i can't debug, it can be literally anything. To be sure it's a bug coming from Lenis and not your implementation i need a codepen that explicitely shows the issue.

[clementroche]

Are you sure barbajs is not removing Lenis CSS ? What happen if you manually add overflow:hidden to html, does it still scroll ?

[dngraphisme]

Hello @clementroche,

I started from scratch with more or less the structure of my site that I am currently developing.

If you click on landing: you are supposed to be stuck on the page with a lenis-stopped on the html.

Look at my code in PJ

Thanks for your help. Nicolas :)

[clementroche]

I would have prefered a codepen so i could tweak code. What does init.lenis() does ? I guess you're calling new Lenis() without stopping the previous one inside this function @dngraphisme

[dngraphisme]

Are you sure barbajs is not removing Lenis CSS ? What happen if you manually add overflow:hidden to html, does it still scroll ?

@clementroche No, the CSS for Lenis is still present :) It is in the scss > settings file.

The hidden overflow has no bearing on the problem. It's as if Lenis continues to spin even though we ask him to stop...

[dngraphisme]

@clementroche sorry for the codepen but it's really not simple, especially since I work with webpack so it's faster that way :(

This is what init.lenis() does

[clementroche]

Here we go, so you're calling new Lenis again every time you call init.lenis() , meaning you never kill the previous instance. This is not a Lenis issue but how you implemented it, i'm closing this.

[dngraphisme]

aaahhhhh.....

@clementroche Ok, there's something I don't understand then. To access the Lenis instance already created in init.lenis()

I then do this:

I store a variable: let smoothScroll = init.lenis();

Then I stop or start... So it's not good ^^' ?

[clementroche]

https://github.com/darkroomengineering/lenis?tab=readme-ov-file#instance-methods

lenis.destroy()

[dngraphisme]

@clementroche ok i found it.

Sorry and many thanks for your help :)