White space parallax

[raunofreiberg]

This issue still persists.

The more you scroll, the more white space appears from the top.

Example markup:

<div className={styles.wrapper}>
    <Parallax
        bgImage={Hero}
        strength={800}
        className={styles.parallaxBg}
        bgHeight{"100%"}
        bgWidth={"100%"} 
    />
</div>

CSS

.wrapper {
    width: 100%;
    height: 100vh;
    min-height: 780px;
}

[rrutsche]

Thanks for the report. I will try to reproduce your issue. But the first guess is that you should not set bgHeightand bgWidth explicitly as it overrides the calculated values inside of the Parallax. The Parallax component calculates a height depending on screen ratio and strength prop so it has enough space to move around without white space. Can you verify that the issue is still there after removing those two props?

[raunofreiberg]

@RRutsche Tried removing both props - issue still persists.

[rrutsche]

@raunofreiberg I just had a look. Your use case is that you don't have anything inside the parallax but only set the style of the wrapping container to a specific height, right? I'm asking because the logic inside calculates position and dimensions depending on its content height. You could just put a container inside the parallax component that has a specific height. But to be clear about my assumptions - can you just create a quick demo on https://codesandbox.io/s/r0yEkozrw? Just fork this project. This would help a lot.

[neaumusic]

I think the solution involves the definition of speed and the known size of your image. If your container is 600px and you want to parallax an image 800px, your max speed should be 800-600 / 20, which would be 10 or -10. You can test this with the positive value and see if topmost scroll and bottommost scroll line up with the underlying image

Note that speed is only an abstraction for setting translateY or translateX based on the scroll axis. Each increment of speed by one will increase the translate effect by 10px.

Example: With a vertical scroll axis, speed: 10 is equivalent to translateY: ['100px', '-100px'] and speed: -10 is equivalent to translateY: ['-100px', '100px'].