Jump to content


Infinite Scroll working on React but not with Next.js

Moderator Tag
Go to solution Solved by IvanSmiths,

Recommended Posts

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:

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

Link to comment
Share on other sites

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




This one is specific for using ScrollTrigger



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


Happy Tweening!

Link to comment
Share on other sites

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


  • Like 1
Link to comment
Share on other sites

  • Solution

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:


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


Hope this can help someone!


  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.