search

darkroomengineering / lenis

How smooth scroll should be
https://lenis.darkroom.engineering
MIT License
9.03k stars 385 forks source link

scrollTo has momentum? #171

Closed Fergie77 closed 1 year ago

Fergie77 commented 1 year ago

I've been trying to use lenis to scroll to elements similarly to how fullpage.js works. Basically I have an element on a page which is full height and I'd like that once the user scrolls past a certain point, lenis scrolls to make the element fill the page.

The problem I'm having is that lenis seems to have a bit of extra momentum from the scroll itself, so overshoots slightly depending on how hard the scroll was. Is there a way I can remove the momentum just before the scrollTo function?

clementroche commented 1 year ago

Hi, i don't know what is fullpage.js can you provide an example ? I think you need Lenis CSS scroll-snap plugin

Fergie77 commented 1 year ago

Hi, i don't know what is fullpage.js can you provide an example ? I think you need Lenis CSS scroll-snap plugin

You can find it here https://alvarotrigo.com/fullPage/

I've tried using that plugin itself but it doesn't play very well with lenis, so have avoided it. However the functionality of having a section perfectly framed is what I'm looking for!

In the site I'm working on, if you scroll down to the pink slider you should hopefully be able to see what I mean.

https://buttermilk-agency.webflow.io/brand-fans

Basically if you scroll on to the trigger which activates the scrollTo function very slowly, it'll fill the screen. However if you flick strongly (I've only tested on a trackpad), you end up further past the element. I've attached two screenshots of those two cases

image image
Fergie77 commented 1 year ago

Also I should note that I'm only looking for this full page functionality on this one element of the page. Everything else should scroll normally.

Fergie77 commented 1 year ago
image

Currently using this code to have it scroll to that section when the GSAP trigger happens.