React-spring: Parallax Issues

[nickwild-999]

Hi, I am struggling with this on a simple SPA that has different components for each level on the page.

I have set up each component in position on ParallaxLayers with the offset, but as soon as I enter the speed it pushes the components down and shows a gap between each component before it animates into place.

````
const IndexPage = () => (

{/* */}

````

Environment

• react-spring v8.0.27
• react v16.8.6

[lisandropat]

Using Gatsby? It happens to me too. Also, I want it to work using default window scrollbar, but setting scrolling={false} breaks parallax effect.

[aleclarson]

Please provide a sandbox or git repository. Thanks!

[lisandropat]

I could solve this by setting the offset to .99 instead of 1 based on ddennis' comment. Yet, it's impossible to mantain responsiveness as page size won't be the same size as the components (offset) inside it. Produces a gap at the bottom of the page or it overlaps the components.

EDIT: to add responsiveness i used window.innerWidth < 960 ? 4 : (window.innerWidth > 1600 ? 2.2 : 3 ) on some offsets

[a-rts]

Hello, may I ask why this issue was closed?
I have also experienced this and have implemented a workaround which calculates Parallax.pages and ParallaxLayer.offset values based on the ParallaxLayer.factor I need which depends on a dynamic grid layout.
The ParallaxLayer factor value seems to never have worked for me, but I have not found a reason why. I am aware that the example on the React Spring website does work with the factor value somehow, but it also appears to be used only on the background element.

[aleclarson]

may I ask why this issue was closed?

It needs a repro and the author has not reciprocated. 👀

[dulcineapena1]

I tried directly with css position: absolute; bottom: 0px; to make some changes in responsive :/

[hayyaun]

The gap is caused by speed of each component, setting speed to 0 will fix your problem.
or you can change the height of your page by changing factor to (1+speed)