Using react-scroll-parallax with GatsbyJS

[OPerel]

Hello and thanks for the package!

I'm trying to use the package in a Gtasby blog (v 2.1.2).
here is the repo.
It's not working when I try using <ParralaxProvider> in a layout component shared across multiple pages. I undrestand that the parallax element's position is calculated based on the scrolling position on the entry page, so it breaks when navigating between pages.
Any chance there's a simple workaround you know of? Maybe it can be added as a feature? Or it can't be solved easily?

Thanks a lot!

[jscottsmith]

Happy to help @OPerel

But I pulled the repo and it seems to be working fine as is. Looks like you have the provider in the layout.js and when navigating between pages the parallax components still work.

Maybe I'm missing something?

[OPerel]

Hey,

Thanks for the quick response.
Try scrolling to the middle of the homepage, navigate to the about page, and scroll down to see the footer.
That's the only parallax element shared between the two pages.

[jscottsmith]

Ok I understand now.

Two things you can do:

1. Update the controller when the page location changes. This will require creating a component that accesses the controller. Here's a quick sample that will update each time a location prop changes:

import { withController } from "react-scroll-parallax"

class Footer extends Component {
  static propTypes = {
    parallaxController: PropTypes.object,
  }

  componentDidUpdate(prevProps) {
    if (prevProps.location !== this.props.location) {
      this.props.parallaxController.update()
    }
  }

  render() {
    return (
      <footer>
        <Parallax y={["30px", "-100px"]}>
          <p>My G-Blog</p>
        </Parallax>
        <Parallax y={["30px", "-100px"]}>
          <p>
            © {new Date().getFullYear()}, Built with{" "}
            <a href="https://www.gatsbyjs.org">Gatsby</a>
          </p>
        </Parallax>
      </footer>
    )
  }
}

export default withController(Footer)

2. Move the footer to a page level component so that it is unmounted/mounted with each route change.

Either should work. Let me know if you still have trouble.

[OPerel]

So I'm trying to go with your first suggestion because the second one messes up some other layouts I'm trying to achieve.
The thing is it's not working.
prevProps and this.props don't have a location property.
So I tried passing a location prop manually to the footer from the layout component.
But then prevProps.location and this.props.location are equal.
Also, my knowledge of react lifecycle methods is limited, but from logging to console from inside componentDidUpdate() I see it's not being called on navigating between page.
The repo is updated with these changes.
Thanks!

[jscottsmith]

@OPerel Sorry should've clarified where the location prop will come from.

Gatsby passes a location object to layout.js -> https://www.gatsbyjs.org/docs/migrating-from-v1-to-v2/#4-pass-history-location-and-match-props-to-layout

Take this prop and pass it the the <Footer location={location}> so that each time it changes the footer will update.

[OPerel]

Hey,
Thanks I'm getting the location object now.
The thing is componentDidUpdate() isn't called on page navigation.
I know of onRouteUpdate() from gatsby's browser api, but I can't figure how to use it for updating parallaxController.

Sorry, i'm kinda new to all this...

[jscottsmith]

@OPerel ya you're right, I'm not too familiar with Gatsby and why this may be the case. I'll try and dig into this a bit more and figure out a solution. Meanwhile you may also want to try moving the ParallaxProvider from layout.js to within this Gatsby API -> https://www.gatsbyjs.org/docs/browser-apis/#wrapRootElement.

[OPerel]

I moved ParallaxProvider to wrapRootElement in gatsby-browser.js.
Result is the same...
I also want to mention that the footer isn't the only problem, as I add more parallax components. Scroll position is off many times after page navigation.
I'll be waiting for a solution.
Thanks a lot!

[jscottsmith]

@OPerel So the problem stems from Gatsby reseting scroll position to the top when navigating pages. This is a good behavior to have in an app, but the problem is I don't know when this hook run in Gatsby. To fix the parallax controller must be updated after this scroll hook. You can see this when logging out the scroll position on mount:

class Footer extends Component {
  componentDidMount() {
    // update the controller cache with incorrect scroll value
    console.log("componentDidMount", window.pageYOffset)
    this.props.parallaxController.update()

    // set timeout to update the controller after window scroll is reset
    setTimeout(() => {
      this.props.parallaxController.update()
      console.log("cdm timeout", window.pageYOffset)
    }, 500)
  }

  render() {
    return (
      <footer>
        <Parallax y={["0px", "-300px"]}>
          <p>My G-Blog</p>
        </Parallax>
        <Parallax y={["0px", "-300px"]}>
          <p>
            © {new Date().getFullYear()}, Built with{" "}
            <a href="https://www.gatsbyjs.org">Gatsby</a>
          </p>
        </Parallax>
      </footer>
    )
  }
}

will result in something like this:

componentDidMount 324
cdm timeout 0

So, not sure how to fix this problem for you. A setTimout is a hacky fix at best. If you can disable Gatsby's scroll management and implement your own that would be a start. Or if there's an api to know when this scroll is reset that would also help. Googling around hasn't provided me much answers, maybe theres something in here that's useful: gatsbyjs/gatsby#7454.

Other than that I don't have further suggestions.

[jscottsmith]

Opening this back up in case someone knows more about Gatsby and has an answer.

[OPerel]

@jscottsmith I'll try looking into it sometime.
In the meanwhile I limited all parallax elements use to the homepage and used pure CSS to create some effects on other pages.

Thanks a lot for all your help!