Parallax Scroll Snap - Githubissues

geoyws commented 3 years ago

🚀 Feature Proposal

Just like CSS Scroll Snap, but for react-spring's Parallax.

Because ParallaxLayers are position: absolute, CSS Scroll Snap can't work for them. Example here.

I'd like to propose that we perhaps follow the CSS Scroll Snap API and implement it for react-spring's Parallax.

Motivation

This would greatly help developer productivity. 😄

Example

<Parallax scrollSnapType="mandatory">
    <ParallaxLayer scrollSnapAlign="start">...</ParallaxLayer>
</Parallax>

kindoflew commented 3 years ago

I really like this! I'm also thinking we might not have to implement the whole Scroll Snap spec because some of the properties can be manipulated with props we already have.

Parallax: could have a scrollSnap prop which would take either 'proximity' or 'mandatory' (x/y, etc. would be unnecessary(?) because we already have the horizontal prop). Also, we could potentially set steps so it could snap to half pages as well? Something like:
```
scrollSnap: { 
type: 'mandatory' | 'proximity', 
step: 'full' | 'half' // or could be numbers I guess
}
```
ParallaxLayer: do we need scrollSnapAlign? I'm thinking it might be easier to implement and use if Parallax just snaps to pages and we let the user adjust ParallaxLayers using props and style.

For example, if you wanted a layer to have scrollSnapAlign='start' you could just give it offset={1} and it would be at that position when you scroll to that page anyway. If you want scroll-padding/scroll-margin you can just add regular padding/margin to your ParallaxLayer's content.

Admittedly, I'm not super familiar with using the Scroll Snap API, so I'm possibly (probably) overlooking use-cases for the other properties. (The main way I've seen it used is to snap to page-height sized sections -- like flipping pages in a book.)

Basically, I'm picturing it as similar to the scrollTo function, except it'd be triggered on scroll, not click. Anyway, I'm definitely into this -- I've seen a decent amount of sites using Scroll Snap, so we should probably support it in some way.

geoyws commented 3 years ago

@kindoflew I'm not super familiar with react-spring and CSS Scroll Snap as well, and I definitely lack the time right now due to my day job to learn things up or contribute soundly 😅 .

Looks like we'll need to experiment with the feature to really know if we need scrollSnapAlign. I still have a feeling that scrollSnapAlign might come in useful e.g. when we just want things to scroll to the bottom of a ParallaxLayer whenever we hit that threshold or some offset of scroll-padding/scroll-margin later, but I could be wrong 😃 .

kindoflew commented 3 years ago

No worries! I was mostly just thinking out loud.

Basically, my initial thinking was that snapping to where a ParallaxLayer is might be a little tricky because it's position is always changing. Snapping to Parallax pages, on the other hand, is straight forward because the position of each page stays the same the whole time.

Anyways, I'm definitely going to mess around with this when I have time, so we'll find out soon enough!