search

darkroomengineering / lenis

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

Scroll Snapping not working #12

Open Rosinida opened 2 years ago

Rosinida commented 2 years ago

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

clementroche commented 2 years ago

Hi @Rosinida thank you for your feedback, can you provide a live demo (ideally on codepen or codesandbox) ?

Rosinida commented 2 years ago

Hi @clementroche sure, just made a very simple codepen demo for you. – hope this helps! https://codepen.io/rosinida/pen/BargMXG Thanks Robin

Rosinida commented 2 years ago

Hi @clementroche. Is there a workaround to define a minimum scroll distance? (as long as the scroll snapping doesn't work yet)

clementroche commented 2 years ago

What do you mean by minimum scroll distance ? You mean emulate CSS scroll snap ?

Rosinida commented 2 years ago

Yes. I would like to say: Each scroll should get the same scroll distance (for example 100vh)

harshilsharma63 commented 2 years ago

Any update on this? I'm facing the same issue - Lenis smooth scroll and CSS snap scroll doesn't work together very well.

clementroche commented 2 years ago

It seems like the solution would be to emulate scroll snapping using JavaScript and that's something we want to avoid. So for the moment i would advice you to not use Lenis if you need CSS snap scroll.

harshilsharma63 commented 2 years ago

Thanks for the update.

liqueflies commented 2 years ago

Investigating: setting the wrapper and the content it will scroll but not interpolating with css easing of the snap. I think this could be a neverending issue.

EDIT: Solving this to me is like solving and improving accessibility of those king of scroll hijacking where you have to wait before triggering another scroll. what a dream :D

drewbaker commented 1 year ago

It seems like the solution would be to emulate scroll snapping using JavaScript and that's something we want to avoid. So for the moment i would advice you to not use Lenis if you need CSS snap scroll.

So stoked to see this library... Really like the approach. Scroll Snap is certainly something we need a lot. Would you be open to a PR trying to implement this? Or is this just a "hard no" that you don't want us to even try?

clementroche commented 1 year ago

Of course we're open to a PR !

drewbaker commented 1 year ago

Noting a possible solution to consider https://github.com/ocsal/scroll-snap

rsm0128 commented 1 year ago

Hi @drewbaker, Here is a PR for scroll snapping. It emulates scroll snapping by using JavaScript.

clementroche commented 1 year ago

Hey you can try https://github.com/funkhaus/lenis-scroll-snap

sushanyadav commented 1 year ago

Hey you can try https://github.com/funkhaus/lenis-scroll-snap

Is this available for react wrapper. if so how do we use it? Thank you so much.

clementroche commented 1 year ago

it should, react-lenis gives you the lenis instance as ref or using useLenis so you just need to plug it then.

sushanyadav commented 1 year ago

It would be greatly appreciated if somebody could include a sandbox for this. 🙏

clementroche commented 4 months ago

hey @Rosinida you can try lenis/snap