React-spring Parallax

Question

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={{ height: "auto" }}>
    <div className="box" />
  </ParallaxLayer>

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

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

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

  <ParallaxLayer offset={2} speed={1.2} style={{ height: "auto" }}>
    <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?

Look at this https://codesandbox.io/s/react-spring-parallax-forked-2k4ro - should give you a hint — Oleg Imanilov, May 25 '21 at 00:50
Thank you for your help, but that's the snippet I shared in the question? Did you perhaps copied over the wrong link? — ale917k, May 25 '21 at 14:21
What do you mean by saying "have them [divs] distanced equally"? Per documentation, The speed prop will affect the initial starting position of a layer, but not its final offset position. — Alexander Strakhov, Jun 04 '21 at 02:58
Parallax effect is you want background image to be fixed and foreground text moving. Which layer you want fix and which layer should be scrollable? — Meera Datey, Jun 21 '21 at 23:27

React-spring Parallax

Description

Reproducible snippet

Problem

Conclusion

0 Answers0