search

jscottsmith / react-scroll-parallax

🔮 React hooks and components to create parallax scroll effects for banners, images or any other DOM elements.
https://react-scroll-parallax.damnthat.tv/
MIT License
2.9k stars 158 forks source link

Next Js 13.5 Effects are not being rendered #221

Closed ghost closed 11 months ago

ghost commented 1 year ago

Support

Hi there,

I followed the official docs and implemented the same in with latest version but unable to get it work,

I am wondering where to put the ParallaxProvider?

import './globals.css'
import { Inter } from 'next/font/google'

import './globals.css'
import { Inter } from 'next/font/google'

import ParallexProviderComponent from '@/components/ParallexProviderComponent'

const inter = Inter({ subsets: ['latin'] })

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>
        ParallexProviderComponent
        {children}
        ParallexProviderComponent
      </body>
    </html>
  )
}

This is not working

Fisico commented 1 year ago

I can confirm that nextjs 13.5 broke the parallax effect. The transforms are not updating and always stay on the initial value. <div class="container" style="will-change: transform; transform: translateY(-52.9394px);">

Worked flawless in 13.4.

DottChen commented 1 year ago

Worked flawless in 13.4.

Which version of 13.4. is working? I'm using 13.4.19 and the transforms are also broken. The value stays unchanged when scrolling. Thank you.

Fisico commented 1 year ago

Worked flawless in 13.4.

Which version of 13.4. is working? I'm using 13.4.19 and the transforms are also broken. The value stays unchanged when scrolling. Thank you.

I have 13.4.19 running. works fine. <Parallax speed={-30} className="row"> is what i use in a "use client"; component.

DottChen commented 1 year ago

Just downgraded to 13.4.1 and worked well for me. Thanks anyway!

jscottsmith commented 1 year ago

@Fisico Is correct -- it seems that using the app directory in Next 13.5 prevents scroll effects.

Reproduction repo: https://github.com/jscottsmith/react-scroll-parallax-next-13-bug

Also confirming that downgrading to next: 13.4.19 seems to fix the issue.

Unclear what this issue is so far, I will look into this further.

pepijn-vanvlaanderen commented 1 year ago

We have the same issue, a workaround we applied is to set scroll listener ourselves, i.e. that would be:

const passiveEventListener: AddEventListenerOptions = { passive: true }
const FixParallaxScrollEvent = () => {
    const parallaxController = useParallaxController()

    useEffect(() => {
        if (parallaxController) {
            const updateParallaxController = () => parallaxController.update()

            window.addEventListener("scroll", updateParallaxController, passiveEventListener)

            return () => {
                window.removeEventListener("scroll", updateParallaxController, passiveEventListener)
            }
        }
    }, [parallaxController])

    return null
}

const ParallexProviderComponent = ({ children }) => {
    return (
        <ParallaxProvider>
            <FixParallaxScrollEvent />
            {children}
        </ParallaxProvider>
    )    
}
ghost commented 1 year ago

@jscottsmith To Natively Support the above Crash are u working on the fix or should the users do workaround for Now?

jscottsmith commented 1 year ago

I would stick to next@13.4.x for now as this issue seems caused by Next. If an update is required in this lib, PR's are welcome.

I would not do as @pepijn-vanvlaanderen suggests because calling update() will break cache on every scroll event and could cause jank.

jscottsmith commented 1 year ago

For clarity, this issue only occurs in development -- npm run dev with NextJS

If you run npm run build && npm run start to run a production build parallax works as expected.

ghost commented 1 year ago

@jscottsmith Thanks for your response!!, I did raise the issue on Next Repo but have yet to get a comment, I am marking the Issue Closed here. Also thanks to @pepijn-vanvlaanderen @DottChen @Fisico for involvement. Have a Good Day!!

IanBoyte commented 1 year ago

Shouldn't this issue remain open for visibility until there's a resolution either on the next.js or react-scroll-parallax side? Also thanks to @pepijn-vanvlaanderen for that workaround.

ghost commented 1 year ago

Okay Let me open this for the Community, it can save Endless hours.

jscottsmith commented 1 year ago

Reiterating —

This is a dev only issue in Next JS. If you run npm run build && npm run start to run a production build parallax effects will works as expected.

DO NOT add your own scroll event listener and call parallaxController.update(). This will cause performance issues.

Stick to next@13.4.x

ghost commented 1 year ago

Agreed @jscottsmith Next 13.5 is Mess, Hot Module Reload Stopped Working. Hope they resolve this major issues or allow us to mention the version while creating the next project using npx create-next-app@version

jscottsmith commented 11 months ago

Please try v3.4.4 to see if this issue is resolved.

ghost commented 11 months ago

Okay I am Closing this issue because latest version fix this.