New Smooth Scrolling Provider "Lenis"

Because the GSAP’s Scroll Smoother has a few limitations (such as handling fixed elements inside the scroll container or anchor scrolling), I decided to optionally add another provider. The new smooth scrolling provider Lenis (https://lenis.studiofreight.com/)[2kb, zipped] is already active on our Bricksforge page. And wow! The scrolling feels really great!

I will release the update later today. After that you can use the alternative scrolling provider optionally! And the best: All position:fixed and sticky problems are fixed automatically

4 Likes

Nice! I just looked at the lenis site and it works well :slight_smile:
Their default easing isn’t quite my taste, however it seems they allow you to pass an easing value.
Could you add easing options, at some point in the future, too?

Cheers :slight_smile:

You will be able to choose one from this list: Easing Functions Cheat Sheet
Would this work for you? :slight_smile:

1 Like

Perfect! Really looking forward to this.

Every single time you post a new update I’m amazed this isn’t 1.0 already :slight_smile: BricksForge has to be the most innovative, exciting addition to the Bricks ecosystem since Bricks itself. Well coded, well considered, and fun. Cheers :beers:

2 Likes

Wow, thank you! :slight_smile:

By the way: the new version with the new scroll smoother is live! Let me know how it feels :nerd_face:

1 Like

I love it! Silky smooth, doesn’t break anything, and configurable to where I like it. Thank you!

I’m just running into 1 problem:

I like quite high values for desktop, but not for mobile. I’d be more than happy to switch mobile off entirely, but I love the scroll normalisation (address bar not hiding) that comes when it’s switched on.

Is it possible to set values separately for touch? It seems I can’t have normalisation without the mobile experience getting the same (admittedly high) values that I’m keen on for desktop.
If not, is it possible to set normalisation for touch and leave everything else default?

No problem. There is one field I’ve missed to implement. Now you can also define a value for “Touch Multiplier”. There is no option to set a separate value for “Duration”. Hopefully the Touch Multiplier will work for you :slight_smile:

That’s now all we can setup with Lenis. Hope this helps :slight_smile:

Just download the version 0.9.4.3 again from your account page :wink:

You’re going to have to stop being so epic, Daniele, or we’re going to start expecting this kind of speed from the rest of the space!

Working much better! Thank you!

I can use the new option, but I think there are some bugs (See attached)
The touch multiplier input field on the options panel also said "t̶r̶u̶e̶ " and couldn’t be adjusted with the + - buttons until I’d manually input and refreshed. Unfortunately I can’t get that back for a screenshot as I set the value, and now the placeholder reads “2”

Also the config icon has lost some styling, as in the screenshot.

2 Likes

Ohhh :smiley: Could you clear your browser cache? Your browser seems to load old files :nerd_face: I think this will solve all mentioned issues. Does it?

1 Like

I have cache killer enabled so have become quite lazy about closing the browser completely. Silly me.
A browser restart has fixed this. Thanks!

Multiplier works very well for my needs :slight_smile:

I’ve been working on revamping my agency website, and BricksForge has played a large part in that. I look forward to showcasing when the time comes (under a different username :stuck_out_tongue: )

Talking of which, it would be pretty cool to add a showcase section to the Bricksforge forum

A showcase section is a really good idea! :slight_smile: I will create one! :+1:

-Edit- Done: Showcase - Bricksforge Community Forum

1 Like

Thanks, it works much better!!! :+1:

1 Like

Amazing work, thank you Daniele!

1 Like

Hi Everyone,

I am having this issue where the smooth scroll using Lenis makes scroll-to unusable. What happens is that it scrolls to the anchor as it should but then, after a second, starts scrolling again until it is about halfway through the section. I found that if I disable Bricksforge Smooth Scrolling with Lenis, the issue is fixed.

I saw the section where it reads, " Use data-lenis-prevent attribute on nested scroll elements. In addition, we advice you to add overscroll-behavior: contain on this element." which I tried but that doesn’t seem to help either.

Would love to use Lenis and really appreciate any help I can get!

Thanks!

M

1 Like

Hi, how can we adjust scroll offset to allow for a sticky header? The page scrolls to the item but it is partially hidden under the sticky header.

Thanks.