Dead space when using ParallaxLayer speed property

[Arnaud-J]

🐛 Bug Report

Using an ParallaxLayer with a non-zero speed creates a dead space in which it is impossible to position the layer (no matter its offset value).
It seems to me that it is a maths problem occuring here and here (more explanations in the repro).

To Reproduce

See the explained codesandbox demo below.

Expected behavior

Being able to vertically align a layer at any height, not matter its speed.

Link to repro (highly encouraged)

https://codesandbox.io/s/withered-sun-zqbh3

Seeing the behaviour requires you to open the sandbox as a full page app (https://zqbh3.csb.app/)

I will explain the repro using a screen height of 1000px, but the explanation is valid for any screen height, only the dead space size will vary (the screen width does not matter at all, at least for vertical parallax).

The repro has one 2-pages Parallax element, with 3 ParallaxLayers inside - yellow, cyan and blue - each having a speed of 0.1.

as for the screen height, changing the speed changes the dead space size.

With this configuration, the layers original positions are at:

• yellow: transform: translate3d(0px, 900px, 0px);
• cyan: transform: translate3d(0px, 1000px, 0px); (the browser rounds this value to an entire pixel, the actual result should be 999.999999)
• blue: transform: translate3d(0px, 1100px, 0px);

The consequence of this is: I am able to create layers between yellow and cyan (i.e. between 900px and 1000px) with offsets from 0.9 to 0.9999...99999 BUT I am unable to create layers between cyan and blue (i.e. between 1000px and 1100px) because there is no actual value between 0.9999...99999 and 1.

The code responsible for translating offset and speed of a layer to an actual height in pixels is the following (see links above):

const targetScroll = Math.floor(props.offset) * parent.space
const offset = parent.space * props.offset + targetScroll * props.speed
const to = parseFloat(-(parent.current * props.speed) + offset)

Seems to me that Math.floor is the problem. Removing it seems to remove the dead space (⚠️ seems from what I tested, and I am definitely not very confident with maths).
The codesandbox has a parallax.js which does not contain any Math.floor for you to try.

Environment

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

Note: sorry for the long text but the issue is quite touchy and not easy to actually visualize. I hope I made it clear 🙃

[localjo]

I'm seeing a related issue, though my perspective of it is a little bit different. I described what I was seeing in #1019 but I could also summarize it as a huge vertical gap between layers around offset: 1. A layer with offset: 0.99 is positioned correctly, but a layer with offset: 1 jumps down almost the whole viewport height leaving a large gap.

If I set speed: 0 on all layers, the gap disappears and all layers are positioned perfectly as I expect. It's only with a speed that I'm seeing the problem. I also tried removing Math.floor from both places in the source, and it seems to change the positioning of the layers, and the ones with an offset >= 1 seem to work, but there is a gap then somewhere between 0 and 1.

I will investigate further tomorrow.

[localjo]

I think that the problem I'm seeing is related to this line, where the viewport height is factored in twice. Setting speed to 0 fixes it because multiplying the viewport height by 0 cancels out the second value.

I'm trying to deduce exactly what this logic should be, but I'm unsure. I realized that it isn't exactly clear what the number speed represents. My initial assumption was that this number was multiplied by the original scroll speed, so that 1 would be the original scroll speed, 0 would be not moving at all and negative value would be moving backward. But this doesn't seem to be the case, and I even found an example of speed being set to -0. According to the documentation, speed "Shift the layer in accordance to its offset. Values can be positive or negative", but that doesn't make it clear exactly how the layer is shifted for different values of speed.

Can anyone clarify how speed is supposed to work? (This line was introduced by @TrySound in this commit).

[localjo]

I have a proposed fix for this issue. That fix, along with making sure that the last layer has a speed of 0 and an appropriate offset (so that it will be positioned at the bottom of the page), resolved my issues. The last layer being positioned at the bottom of the page isn't necessarily required, but since it is a footer in my case, it should be all the way at the bottom.

[localjo]

Just a note about what I learned about Math.floor: it seems that the intention of using Math.floor is to figure out from a layer's offset value which page that layer is on, so I think Math.floor should be there.

[Lermatroid]

I believe that I am running into this issue. Has anyone been able to find a fix for it yet?

[Nadwey]

Same issue here.

[MeanMangosteen]

I am also encountering this issue. The problem can replicated on the codesandbox linked in the official docs:

https://codesandbox.io/s/h1rrv

EDIT:
The contributors reverted the fix for this and decision this is the correct behaviour. Discussion here #1422. It is confusing however.

Thanks for the work, loving the library 👍 .

[Sharan-Haque-Sakin]

I think your spending of a large time with a single problem helped me! Thanks a lot brother! @localjo

[zowlou]

After trying to figure out the different threads 1422, 962, 1023,...
Has the bug been fixed?
How can I compensate for this problem generated by {speed}?

[Sharan-Haque-Sakin]

After trying to figure out the different threads 1422, 962, 1023,... Has the bug been fixed? How can I compensate for this problem generated by {speed}?

I have figured out the problem!It's not actually a problem.It's the way how to speed function works.When we use it, to give give the effect, it slows down the component (on scroll)...This is how it works!

[zowlou]

After trying to figure out the different threads 1422, 962, 1023,... Has the bug been fixed? How can I compensate for this problem generated by {speed}?

I have figured out the problem!It's not actually a problem.It's the way how to speed function works.When we use it, to give give the effect, it slows down the component (on scroll)...This is how it works!

Oh, all right.
Thank you for the information.
But, How do you manage the offset created by speed?
Currently, if I put a speed "1,1" on one of my parallax layers, it drops below my page 1 and creates an empty zone between this page and the next.
I must be missing some information that I can't find in the documentation.

[Sharan-Haque-Sakin]

After trying to figure out the different threads 1422, 962, 1023,... Has the bug been fixed? How can I compensate for this problem generated by {speed}?

I have figured out the problem!It's not actually a problem.It's the way how to speed function works.When we use it, to give give the effect, it slows down the component (on scroll)...This is how it works!

Oh, all right. Thank you for the information. But, How do you manage the offset created by speed? Currently, if I put a speed "1,1" on one of my parallax layers, it drops below my page 1 and creates an empty zone between this page and the next. I must be missing some information that I can't find in the documentation.

Can you share me your code?Perhaps in Codepen?Or here?

[zowlou]

After trying to figure out the different threads 1422, 962, 1023,... Has the bug been fixed? How can I compensate for this problem generated by {speed}?

I have figured out the problem!It's not actually a problem.It's the way how to speed function works.When we use it, to give give the effect, it slows down the component (on scroll)...This is how it works!

Oh, all right. Thank you for the information. But, How do you manage the offset created by speed? Currently, if I put a speed "1,1" on one of my parallax layers, it drops below my page 1 and creates an empty zone between this page and the next. I must be missing some information that I can't find in the documentation.

Can you share me your code?Perhaps in Codepen?Or here?

This is the code for a YouTube tutorial.
It's fully functional on a 1080p screen, but on 2k screens or more, the above-mentioned problem occurs.
https://github.com/ashutosh1919/react-parallax-demo

[Sharan-Haque-Sakin]

Do meant by the empty space?So here's something you are looking for:-

The offset is the page you are currently viewing (you can also think it as the page number or component number)...

When you are slowing down a speed and the offesets are different,one page(or component) is bring slowed down, and to make the effect you are also making next offset fast, so one is slow another is fast therefor a empty space is being created,This is the way it works...
But if you are using all at same offset(like the code) it must work fine.If it doesnt try changing the speeds...

I hope as far ny knowledge os concerned,it will help you...Inform me after you are done with it! I would love to see your result 🙌

[zowlou]

Do meant by the empty space?So here's something you are looking for:-

The offset is the page you are currently viewing (you can also think it as the page number or component number)...

When you are slowing down a speed and the offesets are different,one page(or component) is bring slowed down, and to make the effect you are also making next offset fast, so one is slow another is fast therefor a empty space is being created,This is the way it works... But if you are using all at same offset(like the code) it must work fine.If it doesnt try changing the speeds...

I hope as far ny knowledge os concerned,it will help you...Inform me after you are done with it! I would love to see your result 🙌

Everything you tell me seems logical and works in resolution lower than 2k.
On higher resolutions here is the problem (using native code from the previously uploaded repo):
https://jam.dev/c/90aa80d0-5e23-4739-9c24-5f5ef94f6fe7

[Sharan-Haque-Sakin]

Do meant by the empty space?So here's something you are looking for:-
The offset is the page you are currently viewing (you can also think it as the page number or component number)...
When you are slowing down a speed and the offesets are different,one page(or component) is bring slowed down, and to make the effect you are also making next offset fast, so one is slow another is fast therefor a empty space is being created,This is the way it works... But if you are using all at same offset(like the code) it must work fine.If it doesnt try changing the speeds...
I hope as far ny knowledge os concerned,it will help you...Inform me after you are done with it! I would love to see your result 🙌

Everything you tell me seems logical and works in resolution lower than 2k. On higher resolutions here is the problem (using native code from the previously uploaded repo): https://jam.dev/c/90aa80d0-5e23-4739-9c24-5f5ef94f6fe7

I think giving it a background color might solve the problem... That can be a solution...😕

[zowlou]

Do meant by the empty space?So here's something you are looking for:-
The offset is the page you are currently viewing (you can also think it as the page number or component number)...
When you are slowing down a speed and the offesets are different,one page(or component) is bring slowed down, and to make the effect you are also making next offset fast, so one is slow another is fast therefor a empty space is being created,This is the way it works... But if you are using all at same offset(like the code) it must work fine.If it doesnt try changing the speeds...
I hope as far ny knowledge os concerned,it will help you...Inform me after you are done with it! I would love to see your result 🙌

Everything you tell me seems logical and works in resolution lower than 2k. On higher resolutions here is the problem (using native code from the previously uploaded repo): https://jam.dev/c/90aa80d0-5e23-4739-9c24-5f5ef94f6fe7

I think giving it a background color might solve the problem... That can be a solution...😕

Thank you so much for your help !

[Sharan-Haque-Sakin]

Do meant by the empty space?So here's something you are looking for:-
The offset is the page you are currently viewing (you can also think it as the page number or component number)...
When you are slowing down a speed and the offesets are different,one page(or component) is bring slowed down, and to make the effect you are also making next offset fast, so one is slow another is fast therefor a empty space is being created,This is the way it works... But if you are using all at same offset(like the code) it must work fine.If it doesnt try changing the speeds...
I hope as far ny knowledge os concerned,it will help you...Inform me after you are done with it! I would love to see your result 🙌

Everything you tell me seems logical and works in resolution lower than 2k. On higher resolutions here is the problem (using native code from the previously uploaded repo): https://jam.dev/c/90aa80d0-5e23-4739-9c24-5f5ef94f6fe7

I think giving it a background color might solve the problem... That can be a solution...😕

Thank you so much for your help !

Did it work?That's great!