[bug]: when ParallayLayer is sticky, it disappears after start and appears at end again

[gagandeep-singh2404]

Which react-spring target are you using?

• [X] @react-spring/web
• [ ] @react-spring/three
• [ ] @react-spring/native
• [ ] @react-spring/konva
• [ ] @react-spring/zdog

What version of react-spring are you using?

9.6.1

What's Wrong?

When the ParallaxLayer is sticky, it does not work as demonstrated in the example. Between the start and end points, the Layer vanishes. It is only visible at the start and end point.

To Reproduce

In another Bug report: reaink has produced a repo where you can see the reproduced problem.

Example: https://codesandbox.io/s/parallax-part-component-layer-kg5yw0

Expected Behaviour

The layer should be sticky between the start and end value and should not disappear and reappear.

Link to repo

Example: https://codesandbox.io/s/parallax-part-component-layer-kg5yw0

[SeemoneB]

I have the same problem. Do you have find a solution?

[TeedsK]

having the exact same problem as well, It might have to do with the sticky parallax layer not being a direct child of the parallax but I can't find a work around.

[SeemoneB]

FYI I have found this closed issue https://github.com/pmndrs/react-spring/issues/1667 but the solution released doesn't work in our case. I've tried to set a speed={-1} and set a config with useSpring for set the highest mass and friction for simulate the sticky behavior. But this doesn't work.

My idea was to block the div in the middle of the screen and then use useSpring for move that in and out the visible screen.. I'm stuck in the first phase tho.

I share with you the code https://codesandbox.io/s/parallax-part-component-layer-forked-yqb5kn?file=/src/Part.tsx

So I'm thinking about another solution. Maybe using only useSpring without parallaxLayer in the component OR put another Parallax inside the component. I write you if I'll find a solution.

However I hope the developers will fix this bug 🤞

[Jahorse]

I was having this issue too. I had a separate component generating the ParallaxLayers and returning them to the original one that held the Parallax. When I moved the layers to the same component as the Parallax I no longer had the issue. All I was wrapping them in was <></> so it seems like @TeedsK is on to something when they said the issue might have to do with the sticky layer not being a direct child of the Parallax.

[jamietdavidson]

Can confirm this is also an issue for me

[ghost]

Hi, I also have the same problem when footer doesn stay at the bottom of the page, I dont wrap footer with Parallax.

[ghost]

FInally, after some research and see youtube tutorial, the best way for footer sticking is position: "fixed", width:"100%", bottom:0

[QyuBee]

Hey, I face the same problem. I did some research :

It is not working because we put the ParallaxLayer in a component (not directly inside a React.Fragment or ParallaxLayer) as said here.

I looked how it is working and here what I found:

<Parallax className="parallax-class">
    <ParallaxLayer className="parallax-offet" offset={1}>
    </ParallaxLayer>
    <ParallaxLayer className="parallax-sticky" sticky={{start:1,end:3}}>
    </ParallaxLayer>
</Parallax>

Will create a DOM like this :

<div class="parallax-class" style="...">
    <div  style="...">
        <div class="parallax-offset"  style="..."></div>
    </div>
    <div class="parallax-sticky"  style="..."></div>
</div>

So in DOM, we can see there is one place for sticky layer and one for offset layer.

Now if we do like this:

const ParallaxLayerSticky=()=>(
    <ParallaxLayer className="parallax-layer-sticky" sticky={{start:1,end:3}}>
    </ParallaxLayer>
)

<Parallax className="parallax-class">
    <ParallaxLayer className="parallax-offet" offset={1}>
    </ParallaxLayer>
    <ParallaxLayerSticky/>
</Parallax>

Will create a DOM like this :

<div class="parallax-class" style="...">
    <div  style="...">
        <div class="parallax-offset"  style="..."></div>
        <div class="parallax-layer-sticky"  style="..."></div>
    </div>
</div>

We can see the sticky layer is placed in the place of offset layer. In this configuration, the sticky layer will disappear at the start of the sticky offset and appear at the end.

I tried to move div in the DOM manually in dev option like this:

<div class="parallax-class" style="...">
    <div  style="...">
        <div class="parallax-offset"  style="..."></div>
    </div>
    <div class="parallax-layer-sticky"  style="..."></div>
</div>

and it works normally. I tried to patch it in my code with something like document.querySelector('.parallax-class').appendChild(document.querySelector('.parallax-layer-sticky')) but it is not possible with React.

I check how the Parallax component is coded and in fact the bug happens because the ParallaxLayer in ParallaxLayerSticky is not loaded at the moment where is checked if it's a sticky layer : index.tsx.

I'm not sure of how it works but I imagine that when the Parallax is already loaded, the default place for children is where are placed the ParallaxLayer with an offset (and not the place for the sticky layer).

So I don't know if it is possible to edit the Parallax component so it would check recursively if it's a sticky layer after the initial load. If anyone has any leads