Infinite Scroll working on React but not with Next.js

[IvanSmiths]

Hi all

 

As a title i wanted to make an infinite scoll page with Next.js. The animation is working if the user scrolls down, but not when it scrolls up, it totally get stuck and nothing happen.

The codepen that i inserted works perfectly, but is in React, not in Next.js.

When i use the same exact code in a Next.js project, the animation "onLeave" doesn´t get triggered (so when the user scroll up nothing happen).

 

I notice that if i remove this css, on a Next.js project:

*,

html,

body {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

 the page crash when the user scroll up and trigger the "onLeave" function with this error:

 

 

Also, another strange thing: The animation totally works with Next.js if I resize the page, even of just 1px. If i don`t resize the page, when the user scroll up nothing happen.

 

I have also tried of importing the component without ssr, but nothing changes.

I personally think that is a sort of a bug of Next.js, i hope someone have a solution for this

 

I am sorry that i can not provide a project with Next js, but i haven`t found a way. The starter template Gsap with Next.js in Codesandbox gives me an internal error when i modify, even of a bit the code.

See the Pen GRXOrGR by IvanSmiths (@IvanSmiths) on CodePen.

[Rodrigo]

Hi @IvanSmiths and welcome to the GreenSock forums!

 

You can create an example using one of the starting templates we have in our NextJS collection

 

https://stackblitz.com/@GreenSockLearning/collections/gsap-nextjs-starters

 

This one is specific for using ScrollTrigger

https://stackblitz.com/edit/nextjs-5cm4qn

 

Please use either the last one or a new NextJS project for creating a minimal demo.

 

Happy Tweening!

[elegantseagulls]

Also, have you tried the useLayoutEffect(() => {},[]) hook? It sounds to me like ScrollTrigger is trying to calculate things before the layout is done rendering (with it working on resize). Or make sure to check if your ref is available in the dom before running your function.

This may also be helpful with this (useIsomorphicLayoutEffect):

 

[IvanSmiths]

Thank you to both! In fact i haven`t tried to use useLayoutEffect.

 

But i think i found a solution!

I tried to call ScrollTrigger.create instead of a timeline, and now is working.

So the code now is:

 

        ScrollTrigger.create({

            start: 1,

            end: () => ScrollTrigger.maxScroll(window) - 1,

            onLeaveBack: self => self.scroll(ScrollTrigger.maxScroll(window) - 1),

            onLeave: self => self.scroll(1)

        }).scroll(1);

 

Hope this can help someone!