Feature snap #96

rsm0128 · 2023-01-14T17:06:46Z

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.

vercel · 2023-01-14T17:06:49Z

@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 · 2023-01-17T10:28:32Z

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 · 2023-01-23T20:39:41Z

[...] 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 · 2023-02-05T16:16:21Z

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 · 2023-02-06T11:27:42Z

@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 · 2023-02-11T11:51:04Z

@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 · 2023-02-13T12:43:14Z

@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

13364174888 · 2023-03-27T14:26:45Z

src/util.js

+	const clientSize = axis === 'horizontal' ? 'clientWidth' : 'clientHeight';
+
+	const declaration = parseUnitValue(snapVal)
+	// get y snap length based on declaration unit


13364174888 · 2023-03-27T14:38:50Z

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 · 2023-04-17T15:24:30Z

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 · 2023-04-17T18:39:05Z

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 · 2023-04-17T19:40:08Z

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

drewbaker · 2023-04-17T19:45:26Z

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 · 2023-04-18T01:08:13Z

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

please raise an issue for anything you find!

michaeljblum · 2023-04-18T01:15:49Z

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 · 2023-04-18T01:17:56Z

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 · 2023-04-18T11:32:33Z

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

rsm0128 added 3 commits January 14, 2023 21:43

added snap feature

292f8ef

fixed weird scrolling behavior on scroll dragging

a199498

updated readme, renamed option names

9c028dc

rsm0128 requested a review from a team as a code owner January 14, 2023 17:06

rsm0128 requested review from lsoengas and clementroche January 14, 2023 17:06

rsm0128 mentioned this pull request Jan 14, 2023

Scroll Snapping not working #12

Open

arzafran added the blocked label Mar 21, 2023

13364174888 approved these changes Mar 27, 2023

View reviewed changes

clementroche closed this Apr 18, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature snap #96

Feature snap #96

rsm0128 commented Jan 14, 2023

vercel bot commented Jan 14, 2023

clementroche commented Jan 17, 2023 •

edited

kekkorider commented Jan 23, 2023

drewbaker commented Feb 5, 2023

clementroche commented Feb 6, 2023 •

edited

drewbaker commented Feb 11, 2023

clementroche commented Feb 13, 2023

13364174888 Mar 27, 2023

13364174888 commented Mar 27, 2023

Implemented Scroll Snapping by JS (fix #12 )

Made scrolling stop on mouse down

Added some performance enhancements.

michaeljblum commented Apr 17, 2023 •

edited

drewbaker commented Apr 17, 2023

michaeljblum commented Apr 17, 2023

drewbaker commented Apr 17, 2023

drewbaker commented Apr 18, 2023

michaeljblum commented Apr 18, 2023

drewbaker commented Apr 18, 2023

clementroche commented Apr 18, 2023 •

edited

Feature snap #96

Feature snap #96

Conversation

rsm0128 commented Jan 14, 2023

Implemented Scroll Snapping by JS (fix #12 )

Made scrolling stop on mouse down

Added some performance enhancements.

vercel bot commented Jan 14, 2023

clementroche commented Jan 17, 2023 • edited

kekkorider commented Jan 23, 2023

drewbaker commented Feb 5, 2023

Container settings

Element settings

Proposed API

Limitations

Future roadmap

Nuxt plugin

clementroche commented Feb 6, 2023 • edited

drewbaker commented Feb 11, 2023

clementroche commented Feb 13, 2023

13364174888 Mar 27, 2023

Choose a reason for hiding this comment

13364174888 commented Mar 27, 2023

Implemented Scroll Snapping by JS (fix #12 )

Made scrolling stop on mouse down

Added some performance enhancements.

michaeljblum commented Apr 17, 2023 • edited

drewbaker commented Apr 17, 2023

michaeljblum commented Apr 17, 2023

drewbaker commented Apr 17, 2023

drewbaker commented Apr 18, 2023

michaeljblum commented Apr 18, 2023

drewbaker commented Apr 18, 2023

clementroche commented Apr 18, 2023 • edited

clementroche commented Jan 17, 2023 •

edited

clementroche commented Feb 6, 2023 •

edited

michaeljblum commented Apr 17, 2023 •

edited

clementroche commented Apr 18, 2023 •

edited