[RFC (kind of) -- @react-spring/parallax]: `onScroll` prop for `Parallax`; `onProgress` prop for `ParallaxLayer`

[kindoflew]

A clear and concise description of what the feature is

Add onScroll prop to Parallax

Add a prop to Parallax that takes a function that receives the pixel amount scrolled inside the Parallax container.

Add onProgress prop to ParallaxLayer (name open to bikeshedding)

Add a prop to ParallaxLayer that receives a number between 0 and 1 representing its parallax progress across the viewport.

Why should this feature be included?

onScroll in Parallax

We've seen a handful of Discussions/Questions regarding adding scroll listeners to Parallax recently. As it stand right now, the method to do that is pretty boilerplate-y, to say the least. A user has to:

• attach a ref to Parallax
• get the ref of the container from that ref (ref.current.container.current)
• add an event listener to that ref

It's my opinion that this is an annoying amount of set up. Adding the prop will make this much simpler for users, while adding no overhead to the component (we are already figuring out what scrollTop is internally, so we don't have to do any additional calculations).

onProgress in ParallaxLayer

Continuing from the reasons behind onScroll, this feature would provide users with a value to use in a ParallaxLayer as it translates across the viewport. The first use case that comes to mind is situations where a dev may want the content nested in a ParallaxLayer to change in response to a user's scrolling, but the value from onScroll is not specific to any given layer. Since the actual scrollTop value is irrelevant to any given ParallaxLayer, I propose using the percentage of the layer's journey across the viewport, represented as a float between 0 and 1.

Please provide an example for how this would work

onScroll

The onScroll prop would take a function that receives the the number of pixels scrolled inside the Parallax container. Essentially drilling down a scroll listener to the internal outer container.

We would call the function inside the internal scroll handler with event.target[getScrollType(horizontal)] from this line.

onProgress

I recently implemented a similar feature in my svelte fork of this component here.

TL;DR: The onProgress prop would take a function that receives a number between 0 and 1 representing its motion across the viewport. It would start at 0 when the layer enters the viewport and end at 1 when the layer leaves the viewport (and going the opposite direction if a user scrolls back up the page).

NOTE: I am willing to implement both of these features, I just wanted to open up the floor to comments to see if there is interest in either of them.

[joshuaellis]

Something I definitely wanted to do was abstract some logic into a utility hook called useScroll that could be used, sometimes the parallax component isn't what you want / need but that hook is. So this could be part of the effort?

Other than that i think these additions would be great. I do find Parallax to be a bit "rigid" sometimes.

[joshuaellis]

Closing due to inactivity and lack of engagement. If we want to pursue this later, we can reopen :)