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

Set Parallax Custom Scroll Container #1273

Closed
ghost opened this issue Feb 4, 2021 · 3 comments
Closed

Set Parallax Custom Scroll Container #1273

ghost opened this issue Feb 4, 2021 · 3 comments
Labels
kind: request New feature or request that should be actioned
Projects
Milestone

Comments

@ghost
Copy link

ghost commented Feb 4, 2021

🚀 Feature Proposal

(A clear and concise description of what the feature is.)

This Parallax Library is very useful, when you combine it with the lerp configs, it has the potential to better than rellax.js, react-scroll-parallax, etc. All it needs is the ability to change the Scroll Container it depends on.

Motivation

Rellax.js and many others have poor performance when you compare them directly with react-spring parallax. Most mobile performance is basically unusable with the alternative libraries. If the library doesn't have bad performance, it's the lack of options and customizability. My biggest gripe is not being able to change the scroll container, or if you can, it is done ugly and intuitive.

(Please outline the motivation for the proposal.)

Lack of customizability with alternatives, already achieved with react-spring, but with the addition of a scroll container prop option would resolve that. Also, the change to optional pages props, since it would then rely on the scroll container prop.

Example

<Parallax scrollContainer={containerRef} pages={false}> //parallax content </Parallax>

(Please provide an example of how this feature would be used.)

Here's an example using react-scroll-parallax with a custom scrollContainer prop: https://codesandbox.io/s/spring-butterfly-e5006?file=/src/App.js

Thank you for your time.

@ghost ghost added the kind: request New feature or request that should be actioned label Feb 4, 2021
@joshuaellis
Copy link
Member

closing due to inactivity. please use discussions or discord if you want more help or please consider creating a PR if you want to add a feature 😄

@joshuaellis joshuaellis reopened this Apr 28, 2021
@joshuaellis joshuaellis added this to the v9.X.X milestone Apr 28, 2021
@kindoflew
Copy link
Collaborator

@pcdependency, I'm a little confused about what kind of custom container you would like to be able to set it to. I'm also not sure what you mean by "optional pages".

Currently, the Parallax component itself has two parts: an outer container and an inner container, both of which can be styled (using style and innerStyle props respectively). In your example sandbox, the styles for your container are exactly the same as the defaults for Parallax's outer container.

Are you proposing that Parallax be able to set its container to body (which is what react-scroll-parallax does)? If that's the case, I'd be happy to look into implementing it. But it seems like what you are doing in the sandbox is already possible with the current component (though I could be misunderstanding your use case).

@joshuaellis joshuaellis modified the milestones: v9.X.X, v9.2.0 May 13, 2021
@joshuaellis joshuaellis removed this from To do in Picked for development May 13, 2021
@joshuaellis
Copy link
Member

Closing due to inactivity

@joshuaellis joshuaellis added this to DONE in v9.2.0 May 13, 2021
cameron-martin pushed a commit to cameron-martin/react-spring that referenced this issue May 10, 2022
Also adds the default values for the Bar chart.

This fixes pmndrs#1273
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
kind: request New feature or request that should be actioned
Projects
No open projects
Development

No branches or pull requests

2 participants