lenis icon indicating copy to clipboard operation
lenis copied to clipboard

Published 20 hours ago • verified publisher icon darkroomengineering

Feature snap

Open rsm0128 opened this issue 2 years ago • 3 comments

Implemented Scroll Snapping by JS (fix #12 )

  • New HTML attributes snap and snap-length 
<div snap>scroll content</div>
<div snap="start">scroll content</div>
<div snap="center" snap-length="20vh">scroll content</div>
<div snap="end" snap-lenght="20">scroll content</div>
  • New setting options
snapDuration = 0.4,
snapDelayOnWheel = 0.4,
snapDelayOnResize = 0.1,
snapLength = '20%',
snapAlign = 'start', // start, end, center

Made scrolling stop on mouse down

Added some performance enhancements.

rsm0128 avatar Jan 14 '23 17:01 rsm0128

@rsm0128 is attempting to deploy a commit to the Studio Freight Team on Vercel.

A member of the Team first needs to authorize it.

vercel[bot] avatar Jan 14 '23 17:01 vercel[bot]

Hi, thank you for your pull request but unfortunately the timing is not the best 😅. We've just released v1.0.0 which includes major codebase changes. We should try to adapt your PR to the new codebase. In addition, my initial idea was to create kind of Lenis scroll-snap plugin and not to include it in the core for bundle size reasons. Something like Lenis.plug(ScrollSnap) to enable scroll-snap

clementroche avatar Jan 17 '23 10:01 clementroche

[...] my initial idea was to create kind of Lenis scroll-snap plugin and not to include it in the core for bundle size reasons.

👆 This.

kekkorider avatar Jan 23 '23 20:01 kekkorider

Hey guys, so @rsm0128 was commissioned by me and @funkhaus to do this.

I guess we should discuss the desired API for this, to work with what you had in mind for Lenis...

It seems to me that Lenis is designed to normalize smooth scrolling across browsers. So given that, we should try to do the same with a ScrollSnap feature (or plugin).

Can the Lenis team give us any indication as to when the codebase is in a good state to start this refactor? Sounds liek now would be good? And any help you can provide with how we should build a plugin would be very helpful. Do you have a sample plugin we can see? Or do you want us to build the plugin API too?

So therefore I think the concept is to match the CSS Scroll Snap API as much as possible. So the settings that I'd see as applicable and not too difficult to build would be:

Container settings

Just the basics of this.

scroll-snap-type: x mandatory;
scroll-snap-type: y proximity;
scroll-snap-type: both mandatory;

I don't think we need to allow for scroll-padding in this first version.

Element settings

Snap-align and snap-stop seem to me to be the bare minimums we need.

scroll-snap-align: none;
scroll-snap-align: start;
scroll-snap-align: end;
scroll-snap-align: center;

scroll-snap-stop: normal;
scroll-snap-stop: always;

I don't think we need scroll-margin in this first version.

Proposed API

const lenis = new Lenis({
  scrollSnapType: 'y mandatory',
})

<body>
   <section 
         data-lenis-scroll-snap-align="start" 
         data-lenis-scroll-snap-stop="always"
   >
   </section>
</body>

Then all required values would be normalized or inferred from the instance settings (easing, duration). For values like resizeDelay, snapDelayOnWheel etc... Is it possible for us to get these form Chrome or Firefox source? Again, the goal is just to normalize and replicate the CSS functionality I think.

Limitations

In the interests of simplifying things, I propose we limit the scope to just top level snap points. Meaning, we ignore snap elements inside snap elements like this.

<section data-lenis-scroll-snap-align="start" >Some content</section>
<section data-lenis-scroll-snap-align="start" >Some content</section>
<section data-lenis-scroll-snap-align="start" >
     Some content
     
     <section data-lenis-scroll-snap-align="start" >This would be ignored?</section>
</section>

Should we focus just on vertical scrolling to begin with? Or is horizontal scrolling also needed?

Future roadmap

Support for scroll-margin and scroll-padding.

Nuxt plugin

Ultimately I want to bring this into Nuxt/Vue, so that would be something to keep in mind as we go. How to get this working across routes in a single page app, or when content loads asynchronously (lazy loading a long scrolling page) in etc...

drewbaker avatar Feb 05 '23 16:02 drewbaker

@drewbaker @rsm0128 I did a quick draw of how i see the API

https://github.com/studio-freight/lenis/blob/main/src/scroll-snap.js

clementroche avatar Feb 06 '23 11:02 clementroche

@drewbaker @rsm0128 I did a quick draw of how i see the API

https://github.com/studio-freight/lenis/blob/main/src/scroll-snap.js

This is very helpful. So do you guys give me the thumbs up to move forward with this? Does it fit with what you think the use case is for Lenis? And do we think it's stable enough to do it?

I suppose as a plugin this can just live in our own repo right? Or do you want to maintain a plugins repo? I'm fine with either.

drewbaker avatar Feb 11 '23 11:02 drewbaker

@drewbaker Lenis API will not change that much so i think it's ok for you to start building your plugin. Since plugins will not change any lenis internal code, you can create your own repo to match your needs. Althought if something in lenis codebase is blocking you, we will gonna try to fix it for you. In the same time that can be a good try to see how we can standardize lenis plugins

clementroche avatar Feb 13 '23 12:02 clementroche

Implemented Scroll Snapping by JS (fix #12 )

  • New HTML attributes snap and snap-length 

<div snap>scroll content</div>

<div snap="start">scroll content</div>

<div snap="center" snap-length="20vh">scroll content</div>

<div snap="end" snap-lenght="20">scroll content</div>
  • New setting options

snapDuration = 0.4,

snapDelayOnWheel = 0.4,

snapDelayOnResize = 0.1,

snapLength = '20%',

snapAlign = 'start', // start, end, center

Made scrolling stop on mouse down

Added some performance enhancements.

13364174888 avatar Mar 27 '23 14:03 13364174888

Hey @drewbaker is this plugin still in progress or has it been shelved for the time being? No worries if so, just curious. Great addition to the library. Thanks.

michaeljblum avatar Apr 17 '23 15:04 michaeljblum

We have a v0 and a v1 version of it over here: https://github.com/rsm0128/lenis-scroll-snap

Would love people to use it and log any issues with it, so we can get it fixed.

drewbaker avatar Apr 17 '23 18:04 drewbaker

That link is 404ing for me, @drewbaker. Would love to try it out and let you know, though.

michaeljblum avatar Apr 17 '23 19:04 michaeljblum

That link is 404ing for me, @drewbaker. Would love to try it out and let you know, though.

Sorry it's set to private, I will get @rsm0128 to make it public ASAP.

drewbaker avatar Apr 17 '23 19:04 drewbaker

Ok here it is: https://github.com/funkhaus/lenis-scroll-snap

please raise an issue for anything you find!

drewbaker avatar Apr 18 '23 01:04 drewbaker

Awesome, thanks. Would you happen to have a toy codesandbox example or anything lying around? In case you've tried it out in React. If not I'll just figure it out.

michaeljblum avatar Apr 18 '23 01:04 michaeljblum

Awesome, thanks. Would you happen to have a toy codesandbox example or anything lying around? In case you've tried it out in React. If not I'll just figure it out.

No sorry I haven’t used it on a project yet…

drewbaker avatar Apr 18 '23 01:04 drewbaker

Thank you for your work, i guess i can close this PR so. I will add you repo into the readme

clementroche avatar Apr 18 '23 11:04 clementroche