Element with parallax applied always transformed along Y axis when scroll position is 0 about react-scroll-parallax HOT 3 CLOSED

Thanks. Cool site.

Yes this is expected. The way I'm getting around it it is by expanding the height of the parallax element by the total amount of offset. Given a -10% min offset and 10% max offset, you'd need to expand the height by 20% and position it correctly so the edges are never visible. I'm doing that here in the src for <ParallaxBanner>. I'm also doing something similar in the CodePen originally linked, check the Scss.

You'll have to handle this manually, as <ParallaxBanner> isn't setup to handle video. But I'm think it should be an easy update to allow custom children for each layer. I'll look into supporting this.

Let me know if this helps.

from react-scroll-parallax.

Hmm, it depends on where the element is positioned relative to the viewport window. Would you mind sharing your code with me, or an isolated demo of what your doing? Then I can confirm if it's expected behavior or if something else is up.

Edit: after reading this again I think I get what you are saying, but this is by design. Even though the page hasn't scrolled, the element is within the the viewport (I'm guessing) and receiving some translations. It would only not be translated if it was completely below the viewport (top element edge below bottom edge of view).

This is how the lib applies translations, based on the progress of the element through the viewport. Starts at 0 when top edge is below view, moves to 1 when the element's bottom edge leaves the top. In order to support what I think you asking I'd need to calculate the progress differently, and it would need to be configurable. Perhaps a v2 feature? Not sure about the level of effort, but that version should be a bit more flexible for such use cases.

Also I just added the <ParallaxBanner>, if you wanna try that out, but it will likely be the same issue.

Feel free to still send over an example if you want me to take a look.

from react-scroll-parallax.

Hi. Here's a preview of what I mean: https://5a8402887b6ee82bc4420066--blacklabfilms.netlify.com/

from react-scroll-parallax.