react-spring: Can I really only set height by viewport heights (via `pages` attribute)?
Asked Answered
C

0

6

I'm attempting to use react-spring to create a parallax effect on my site. I want the parallax container to be the background of the entire site, plus a 100vh "footer" at the bottom. Here's a simple diagram of what I mean: ideal react-spring page layout

My issue is, according to the react-spring parallax docs, the Parallax container requires a pages attribute, which "Determines the total space of the inner content where each page takes 100% of the visible container".

From my understand of this, as well as my testing, this means that I have to explicitly set the entire height of that Parallax Container based on divisions of 100% viewport height. This means I can't just have the Parallax Container contain the content of my site, which doesn't have a preset height, let alone height divided by 100vh.

So my question is, can I have the Parallax Container of react-spring contain exactly my entire site's content, plus a 100vh at the bottom?

Here's a sandbox demo of my problem, with the Parallax pages attribute set on line 29: https://codesandbox.io/embed/react-spring-pageheight-question-c12er

Coed answered 30/9, 2019 at 23:48 Comment(2)
Agreed. I'm converting a sticky nav page into full parallax and it seems not possible, and not a good idea, to break my layout into a stack of 100% viewport chunks... when the viewport might be too small in some cases.Aground
I'm having the same issue. Has anyone found a solution or explanation on how to use this properly?Groenendael

© 2022 - 2024 — McMap. All rights reserved.