Next Js 13.5 Effects are not being rendered #221

AmanAdastra · 2023-09-21T11:48:26Z

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 · 2023-09-21T19:51:54Z

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 · 2023-09-22T09:41:12Z

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 · 2023-09-22T10:35:42Z

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 · 2023-09-22T10:37:27Z

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

jscottsmith · 2023-09-23T20:58:20Z

@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 · 2023-09-27T09:42:07Z

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

AmanAdastra · 2023-09-27T12:58:30Z

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

jscottsmith · 2023-09-30T21:04:23Z

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 · 2023-09-30T21:39:31Z

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.

AmanAdastra · 2023-10-01T03:46:20Z

@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 · 2023-10-06T15:37:10Z

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.

AmanAdastra · 2023-10-10T03:30:51Z

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

jscottsmith · 2023-10-10T04:16:58Z

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

AmanAdastra · 2023-10-10T05:01:49Z

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

@raRaRa

- related to strict mode issues #233 #227 and #221 - credit to @raRaRa for #234

jscottsmith · 2023-11-21T02:19:02Z

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

AmanAdastra · 2023-11-21T03:26:00Z

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

AmanAdastra mentioned this issue Sep 22, 2023

React Parallex Scroll is Not Rendering in the Latest Next Version, vercel/next.js#55794

Open

1 task

jscottsmith added the bug label Sep 23, 2023

AmanAdastra closed this as completed Oct 1, 2023

AmanAdastra reopened this Oct 10, 2023

jscottsmith removed the bug label Oct 10, 2023

IanBoyte mentioned this issue Oct 24, 2023

Cannot read properties of undefined (reading 'destroy') on live reload #227

Closed

raRaRa mentioned this issue Nov 19, 2023

fix: strict mode and missing context value #234

Closed

jscottsmith added a commit that referenced this issue Nov 21, 2023

fix: create controller only once (#235)

61d56cc

- related to strict mode issues #233 #227 and #221 - credit to @raRaRa for #234

AmanAdastra closed this as completed Nov 21, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Next Js 13.5 Effects are not being rendered #221

Next Js 13.5 Effects are not being rendered #221

AmanAdastra commented Sep 21, 2023 •

edited by jscottsmith

Fisico commented Sep 21, 2023

DottChen commented Sep 22, 2023 •

edited

Fisico commented Sep 22, 2023

DottChen commented Sep 22, 2023

jscottsmith commented Sep 23, 2023 •

edited

pepijn-vanvlaanderen commented Sep 27, 2023

AmanAdastra commented Sep 27, 2023 •

edited

jscottsmith commented Sep 30, 2023

jscottsmith commented Sep 30, 2023

AmanAdastra commented Oct 1, 2023

IanBoyte commented Oct 6, 2023 •

edited

AmanAdastra commented Oct 10, 2023

jscottsmith commented Oct 10, 2023 •

edited

AmanAdastra commented Oct 10, 2023

jscottsmith commented Nov 21, 2023

AmanAdastra commented Nov 21, 2023

Next Js 13.5 Effects are not being rendered #221

Next Js 13.5 Effects are not being rendered #221

Comments

AmanAdastra commented Sep 21, 2023 • edited by jscottsmith

Support

Fisico commented Sep 21, 2023

DottChen commented Sep 22, 2023 • edited

Fisico commented Sep 22, 2023

DottChen commented Sep 22, 2023

jscottsmith commented Sep 23, 2023 • edited

pepijn-vanvlaanderen commented Sep 27, 2023

AmanAdastra commented Sep 27, 2023 • edited

jscottsmith commented Sep 30, 2023

jscottsmith commented Sep 30, 2023

AmanAdastra commented Oct 1, 2023

IanBoyte commented Oct 6, 2023 • edited

AmanAdastra commented Oct 10, 2023

jscottsmith commented Oct 10, 2023 • edited

AmanAdastra commented Oct 10, 2023

jscottsmith commented Nov 21, 2023

AmanAdastra commented Nov 21, 2023

AmanAdastra commented Sep 21, 2023 •

edited by jscottsmith

DottChen commented Sep 22, 2023 •

edited

jscottsmith commented Sep 23, 2023 •

edited

AmanAdastra commented Sep 27, 2023 •

edited

IanBoyte commented Oct 6, 2023 •

edited

jscottsmith commented Oct 10, 2023 •

edited