React-Spring — Parallax Issue incorporating a nav and footer due to height constraints

Question

I am using Parallax from react-spring to create a parallax effect. I understand that the can use the height of its parent to set its area. This solution, however, is causing a strange behaviour when scrolling by keeping the and visible on the screen. I have a few questions here:

1. How can I setup this layout in a way where it will behave normally?
2. Do I need to place the and inside the ParallaxComp with fixed heights (I am hoping there is a better solution)?
3. Is there a way to make the assume its height based on the contents inside rather than use the prop factor?

Thank you in advance.

Codesandbox

App.js

import React from "react";

import ParallaxComp from "./ParallaxComp";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <nav style={{ height: "5rem", background: "purple", color: "white" }}>
        Nav
      </nav>
      {/* <main style={{ height: "100%" }}> */}
      <main style={{ height: "100vh" }}>
        <ParallaxComp />
      </main>
      <footer style={{ height: "5rem", background: "blue", color: "white" }}>
        Footer
      </footer>
    </div>
  );
}

ParallaxComp.js

import React from "react";
import { Parallax, ParallaxLayer } from "react-spring/renderprops-addons";

let parallax;

const ParallaxComp = () => {
  return (
    <Parallax pages={2} scrolling={true} vertical ref={ref => (parallax = ref)}>
      <ParallaxLayer
        offset={0}
        speed={0.1}
        style={{
          fontSize: "23.47222vw",
          textAlign: "right",
          textTransform: "uppercase"
        }}
      >
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 948.26 1122.2">
          <path
            d="M887 0c0 224.45-182.22 406.4-407 406.4S73 224.45 73 0h814z"
            fill-rule="evenodd"
            clip-rule="evenodd"
            fill="#fec70e"
          />
        </svg>
      </ParallaxLayer>
      <ParallaxLayer
        offset={0}
        speed={-0.4}
        style={{
          fontSize: "23.47222vw",
          textAlign: "right",
          textTransform: "uppercase"
        }}
      >
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 948.26 1122.2">
          <path
            d="M216 105.2c0 59.65-48.35 108-108 108S0 164.84 0 105.2h216z"
            fill-rule="evenodd"
            clip-rule="evenodd"
            fill="#037e36"
          />
        </svg>
      </ParallaxLayer>
    </Parallax>
  );
};

export default ParallaxComp;

Vinasse

hey! have you managed to figure it out? Im facing exactly the same problem – Borg

No, unfortunately. 🙏 – Vinasse

I've started using 'react-scroll-parallax', it has some downsides as well but mostly easy to use and helps with our problem – Borg