Parallax effect not working in nextjs 13

[Mohammed Mehdi]

Bug

import "./App.css";
import {
  Parallax,
  ParallaxProvider,
} from "react-scroll-parallax";

function App() {
  return (
    <ParallaxProvider>
      <div className=" border-2 border-black h-screen">1</div>
      <div className="border-2 flex justify-center items-center border-red-600">
        <Parallax className="" speed={5} translateX={[-50, 50]}>
          <h1 className="bg-blue-400 text-8xl text-white font-thin">Hello</h1>
          <div className=" border-2 border-black h-screen">1</div>
          <div className=" border-2 border-black h-screen">1</div>
          <div className=" border-2 border-black h-screen">1</div>
        </Parallax>
        <Parallax className="" speed={5} translateX={[50, -50]}>
          <h1 className="bg-red-400 text-8xl text-white font-thin">World!</h1>
        </Parallax>
      </div>
      <div className=" border-2 border-black h-screen">2</div>
    </ParallaxProvider>
  );
}

export default App;

this same code is working when i am using it in a vite-tailwind react app
but it doesnt work in nextjs-tailwind app.

i have tried making the component as client component using "use client" in nextjs.
i even tried using dynamic import to load the ParallaxProvider but no luck.
i also tried wrapping the whole app in ParallaxProvider but didnt work.
i tried npm and pnpm. didnt work.

[Brian]

Any information on how you fixed this?

[Mohammed Mehdi]

Any information on how you fixed this?

i downgraded to
"next": "13.4.19",
and it fixed the issue i think.

[J Scott Smith]

The latest version of react-scroll-parallax should resolve these issues.

See #233

[Brian]

The latest version of react-scroll-parallax should resolve these issues.

See #233

Same issue with 3.4.5. Will provide snippets once I am home! Is there anyway to put the ParallaxProvider inside of the layout in Next 13?

[J Scott Smith]

Is there anyway to put the ParallaxProvider inside of the layout in Next 13

You must mark the component it's used in as 'use client' before using it in the root layout. Like so:

https://github.com/jscottsmith/react-scroll-parallax-next-13-bug/blob/main/app/Providers/index.tsx

[Brian]

Is there anyway to put the ParallaxProvider inside of the layout in Next 13

You must mark the component it's used in as 'use client' before using it in the root layout. Like so:

https://github.com/jscottsmith/react-scroll-parallax-next-13-bug/blob/main/app/Providers/index.tsx

Thank you so much, I see now