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

damon
  • 2,687
  • 8
  • 25
  • 35
  • 1
    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. – doublejosh Apr 05 '22 at 18:11
  • 1
    I'm having the same issue. Has anyone found a solution or explanation on how to use this properly? – Chopin23 May 05 '22 at 20:19

0 Answers0