Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature snap #96

Closed
wants to merge 3 commits into from
Closed

Conversation

rsm0128
Copy link

@rsm0128 rsm0128 commented Jan 14, 2023

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 rsm0128 requested a review from a team as a code owner January 14, 2023 17:06
@vercel
Copy link

vercel bot commented Jan 14, 2023

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

A member of the Team first needs to authorize it.

@clementroche
Copy link
Member

clementroche commented Jan 17, 2023

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

@kekkorider
Copy link

[...] 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.

@drewbaker
Copy link

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...

@clementroche
Copy link
Member

clementroche commented Feb 6, 2023

@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

@drewbaker
Copy link

@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.

@clementroche
Copy link
Member

@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

const clientSize = axis === 'horizontal' ? 'clientWidth' : 'clientHeight';

const declaration = parseUnitValue(snapVal)
// get y snap length based on declaration unit

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.


@13364174888
Copy link

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.

@michaeljblum
Copy link

michaeljblum commented Apr 17, 2023

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.

@drewbaker
Copy link

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.

@michaeljblum
Copy link

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

@drewbaker
Copy link

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
Copy link

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

please raise an issue for anything you find!

@michaeljblum
Copy link

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.

@drewbaker
Copy link

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…

@clementroche
Copy link
Member

clementroche commented Apr 18, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Scroll Snapping not working
7 participants