jscottsmith / react-scroll-parallax

🔮 React hooks and components to create parallax scroll effects for banners, images or any other DOM elements.

Home Page:https://react-scroll-parallax.damnthat.tv/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Parallax effect not working in nextjs 13

catosaurusrex2003 opened this issue · comments

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.

Any information on how you fixed this?

Any information on how you fixed this?

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

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

See #233

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?

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

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