React-spring Parallax

Description

I'm trying to implement some parallax animation using react-spring, but I'm not able to find a way to space the containers in a responsive / uniform way.

Reproducible snippet

Here I made a snippet which contains a basic parallax effect animating some divs on scroll:

<Parallax pages={5}>
  <ParallaxLayer offset={0} speed={0.4} style=>
    <div className="box" />
  </ParallaxLayer>

  <ParallaxLayer offset={0.9} speed={0.6} style=>
    <div className="box" />
  </ParallaxLayer>

  <ParallaxLayer offset={1.1} speed={0.8} style=>
    <div className="box" />
  </ParallaxLayer>

  <ParallaxLayer offset={1.9} speed={1} style=>
    <div className="box" />
  </ParallaxLayer>

  <ParallaxLayer offset={2} speed={1.2} style=>
    <div className="box" />
  </ParallaxLayer>
</Parallax>

Problem

Having the layers with heights based on their content make them not responsive, as each layer is specifically starting from the specified offset position.

Conclusion

I would guess that works if the layers are being set with a specified viewport height, but is that really the only way? Or am I perhaps misinterpreting the usage of this component?

from React-spring Parallax