Parallax stop working if component re-render

[scoutrul]

Hello! Thanks for plugin, I very like it!
On initial mount is everything working fine.
A problem appear after returning to the component that just freezing parallax without any errors.
I have ParallaxController.init() on the root and window.ParallaxController.update() in componentDidMount.

I do not know what to do with this, can you help me please?

[jscottsmith]

@scoutrul Can you provide a link for me to see the problem -- or share the source code with me? Otherwise I won't be able to help you debug the issue.

[scoutrul]

Did gave access to you https://github.com/scoutrul/firegg/blob/master/src/components/blocks/IndexHero.js

[jscottsmith]

Thanks for that.

ParallaxProvider should be around your app. Remove the <ParallaxProvider> from <IndexHero> and add it to your App.js. Also ParallaxController.init() is no longer necessary. Example:

// ParallaxController.init()
// no need for this with the latest version. 
// it's now handled by the provider

const App = props => {
  const siteMenu = props.menuItems;
  const socialMenu = props.socialItems;
  return (
    <div id="app" style={styles}>
      <Helmet title="Guardsman Limited®" />
      <ParallaxProvider>
        <Wrapper MenuItems={siteMenu}>
          <Header MenuItems={siteMenu} />
          <Routes />
          <Footer MenuItems={siteMenu} SocialItems={socialMenu} />
        </Wrapper>
      </ParallaxProvider>
    </div>
  );
};

I'll clarify in the docs that the <ParallaxProvider> should be around your app -- or other components that are not unmounted during route changes.

Closing but if you continue to have issues just post here.

[scoutrul]

Now I got it, thank you!

[Brundeco]

Hello! Thanks voor the plugin!
Just experiencing a weird issue.
Yesterday I managed to get the effect working properly, today the parallax effect doesn't do much anymore. I didn't change the code.
Has someone also experienced this?

This is my code

Thanks in advance!

(just tried wrapping the around my but also no result. And the code snippet below worked perfectly yesterday)

<React.Fragment>
        <ParallaxProvider>
          <Parallax className="custom-class" y={[-40, 40]} tagOuter="figure">
            <HeaderFullscreen />
          </Parallax>
          <GridWrapper style="main-page-wrapper">
            <GeneralNav />
            <BlankDiv style="blank-div-md" />
            <Title
              style="section-title"
              text="Wat je kan verwachten van onze gdm opleidingen"
            />
            <Paragraph
              text="testen"
              style="standard-text-paragraph par-pos-1 paragraph-mb-med"
            />
            <Quote
              text=" opleidingsdirecteur"
              style="primary-quote quote-pos-1"
            />
            <Paragraph style="paragraph-bottomline par-pos-1" />
            <PrimaryButton text="Bekijk onze richtingen" />
            <BlankDiv style="blank-div-md" />
            <div className="row-space-between">
              <Title style="section-title" text="Work" />
            </div>
            <div className="row-space-between">
              <Featured style="featured-bg-image" />
              <Featured style="featured-bg-image" />
            </div>
            <BlankDiv style="blank-div-lg" />
            <Footer />
          </GridWrapper>
        </ParallaxProvider>
      </React.Fragment>

[jscottsmith]

@gdm-1718-brundeco impossible to say without a link to your site or a git repo. This issue is unrelated and old -- open a new issue if you need some support and I can help.