Feature request: other transforms based on scroll progress #89
Description
Feature Request
I'm curious if this library could allow for arbitrary transforms to make the parallax behavior even more flexible. I was looking for the ability to change the size of an element on scroll: to zoom in as the element moved into view. As far as I could tell, it's not currently possible to change anything other than the x-y position of the element.
If the <Parallax /> component or child element had access to the "% moved" (progress through its movement) value, then the user could use that value to implement any transforms or style changes.
Proposed Changes
One approach is to use a render prop that receives the "% moved". Another React parallax library does this. However, I imagine there could be performance concerns about constantly re-rendering in React.
Another approach would be to let the user specify a function that, provided the "% moved" value, returns raw styles. This would be similar to how the translate3d transform is set here. For example, maybe there's a prop like:
<Parallax
getTransformStyle={progress => `rotate(${progress * 3}deg)`}
/>Then, the library could merge that with the translate3d transform string when updating. We could also generalize this to set arbitrary style values with something like a getStyle prop.
Thoughts?