React-Spring Change Parallax Offset according to Media Query

Question

I am using React Spring for Parallax on a webpage however one of the components higher up on the page <Section2 /> uses flexbox to force 4 large horizontal icons to render as 2 x 2 icons on smaller screens.

When this happens it causes the offset value to be wrong for <Section3> in the mobile view. So the question I have is how do I change the offset value either by a media query or by other means.

Here is my code:

const Home = () => {

  return (
    <>
      <Layout>
        <SEO title="Home" />
        <Parallax pages={4}>
          <ParallaxLayer offset={0} speed={1} style={{ zIndex: '5' }}>
            <Hero />
          </ParallaxLayer>
          <ParallaxLayer offset={0.7} speed={1.4} style={{ zIndex: '10' }}>
            <HeroName />
          </ParallaxLayer>
          <ParallaxLayer
            offset={0.8}
            speed={0.7}
            style={{ zIndex: '-1', backgroundColor: '#fcf7f0' }}
          >
            <Section1 />
          </ParallaxLayer>
          <ParallaxLayer offset={1} speed={0.8} style={{ zIndex: '3' }}>
            <Section2 />
          </ParallaxLayer>
          <ParallaxLayer offset={1.2} speed={0.5} >
           <Section3 />
          </ParallaxLayer>
        </Parallax>
      </Layout>
    </>
  );
};

Many thanks

Nick Wild · Accepted Answer · 2019-08-22 08:53:48Z

1

I solved this by using a ternary . offset={window.innerWidth < 768 ? 2.1 : 1.2}

answered Aug 22, 2019 at 8:53

Nick Wild

5851 gold badge12 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dmitriy Over a year ago

What would happen on SSR?

doublejosh Over a year ago

SSR should rendering a mobile default, something like 650. So perhaps... typeof window !== "undefined" ? 650 : window.innerWidth < 768 ? 2.1 : 1.2

Collectives™ on Stack Overflow

React-Spring Change Parallax Offset according to Media Query

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related