reactjsparallax

React scroll Parallax image are jittery on phone


I have tried to use React scroll parallax to get the famous scrolling effect on a couple of images which works perfectly fine in chrome, but in safari and I should say on a small screen looks jittery and give the user a bad experience.
here is a sample project created in stackBitz: https://stackblitz.com/edit/react-ybdmbn.
please guide me on how I can improve it or what I am doing wrong.

Solution

  • I fix the issue by removing the: speed={-10} property from the <Parallax> tag.
    Parallax gets a couple of property which the speed and the translateY are basically the same thing.

        <Parallax translateY={[20, -70]} >
          <img src="https://picsum.photos/200/300" />
        </Parallax>
        <Parallax translateY={[30, -90]} >
          <img src="https://picsum.photos/seed/picsum/200/300" />
        </Parallax>
      </div>

      <div className={styles.Bottom}>
        <Parallax translateY={[20, -80]} >
          <img src="https://picsum.photos/200/300?grayscale" />
        </Parallax>
        <Parallax translateY={[40, -80]} >
          <img src="https://picsum.photos/id/870/200/300?grayscale&blur=2" />
        </Parallax>
      </div>