@react-spring/parallax fails to position elements when speed is not `0`

[alexcanessa]

🐛 Bug Report

When the speed is set to something other than 0, the position of the elements is wrong.
I believe this bug is introduced by #1023, as in if I revert the change seems to work as expected.

To Reproduce

This is the parallax example from the docs website.
I've forked it and try to use the @react-spring/parallax package instead - the API is the same - and it breaks:
https://codesandbox.io/s/reverent-dijkstra-3rwg0?file=/src/index.js

You'll notice three imports:

• react-spring/addons (old, working)
• @react-spring/parallax (latest, not working)
• ./parallax.js (latest with fix(parallax): remove extra targetScroll space #1023 reverted, working)

Expected behavior

The final position of the elements should not be dependent on the speed.

Link to repro (highly encouraged)

See above.

Environment

• react-spring v9.1.1
• react v17.0.2

[joshuaellis]

Thanks for that, reverting that change brings back a different bug, im not sure which is worse! It seems like #1023 was a pretty small change, if you're interested in looking in reverting but resolving that issue #962 i'd be happy to help you where I can?

I'm currently slammed trying to update the docs!

[alexcanessa]

@joshuaellis yes I'll have a look and try to understand what #1023 was actually solving and see if there is a way of fixing both.

[kindoflew]

Chiming in because I'm working on porting this component to Svelte (svelte-parallax), so I've been paying attention to issues here.

In regards to #962 and #1019, I think there is a misunderstanding as to what the setPosition function should be doing. As I understand it (and I might be wrong) a ParallaxLayer will be at it's offset position when the page it is in completely fills up the viewport. In other words, with offset={1.5} the layer will be halfway down page 1 when page 1 is lined up with the viewport. The layer doesn't begin at it's offset, it ends up there.

So, with offset={0.99} that layer still "belongs" to page 0 so it will be barely poking into the viewport when scrollTop still equals 0. An offset of 1 means it now belongs to page 1 and so it won't be at it's offset position until the container is scrolled to page 1. This explains the initial gap in #1019. This also explains why you can't seem to place a layer between offset 0.99 and 1. It's because when an offset crosses a page threshold it's initial position is decided relative to the next page.

So my guess is that the behavior before #1023 is correct:

 setPosition(height, scrollTop, immediate = false) {
            // figures out amount to scroll before the page that the layer belongs to fills up the viewport 
            const targetScroll = Math.floor(offset) * parent.space

           // offset of the layer plus how much you have to scroll (with speed factored in)
            const distance = parent.space * offset + targetScroll * speed
            ctrl.start({
              // Eventually `-(scrollTop * speed)` will cancel out `targetScroll * speed` in `distance` 
              // and all you are left with is the actual offset of the layer
              translate: -(scrollTop * speed) + distance,
              config: parent.config,
              immediate,
            })
          },

I think the main issue is clearly explaining how/why ParallaxLayers behave the way they do in the docs.

[joshuaellis]

Well, there are no docs on Parallax cause I have no idea how it works in v9 (its definitely been changed since the v8 docs). If you want to submit a PR to revert that change i'd be happy to push a fix ⭐

[kindoflew]

Sure! And I didn't realize that the Parallax docs aren't on the site anymore. I can also work on submitting a draft for docs to react-spring.io if that's cool too.

[joshuaellis]

Sure! And I didn't realize that the Parallax docs aren't on the site anymore. I can also work on submitting a draft for docs to react-spring.io if that's cool too.

That would be more than cool. That would be more helpful than you can possibly imagine. Thank you ⭐