react-scroll-parallax: Next Js 13.5 Effects are not being rendered

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

About this issue

Original URL
State: closed
Created 9 months ago
Reactions: 4
Comments: 16 (5 by maintainers)

Commits related to this issue

fix: create controller only once (#235) - related to strict mode issues #233 #227 and #221 - credit to @raRaRa for #234 — committed to jscottsmith/react-scroll-parallax by jscottsmith 7 months ago

Most upvoted comments

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.

IanBoyte on Oct 6, 2023

@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!!

AmanAdastra on Oct 1, 2023

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>
    )    
}

pepijn-vanvlaanderen on Sep 27, 2023

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

AmanAdastra on Nov 21, 2023

@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.

jscottsmith on Sep 23, 2023

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

DottChen on Sep 22, 2023