Parallax effect not working in nextjs 13

[catosaurusrex2003]

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.

[BrianGrug]

Any information on how you fixed this?

[catosaurusrex2003]

Any information on how you fixed this?

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

[jscottsmith]

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

See #233

[BrianGrug]

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?

[jscottsmith]

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

[BrianGrug]

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