Page transitions in Next.js? #2139

Mohammed-Mounir · 2023-04-06T11:17:28Z

Mohammed-Mounir
Apr 6, 2023

Hello

I tried before react-spring to animate page transition in next.js but I was having an issue,
pretty sure I was doing something wrong, so what is the correct for animating page transition in latest next,js/react-spring?

BTW in framer-motion I simply wrote HOC and wrapped each page with HOC.

Thank you.

Edit: I already search the discussions and found the following post,
but when I navigate to any page it doesn't display/show:

export default function App({ Component, pageProps }: AppProps) {
  const router = useRouter();
  const [transition, api] = useSpring(() => ({
    from: { opacity: 0, scale: 0 },
    to: { opacity: 1, scale: 1, background: '#0e0e0e' },
  }));

  useEffect(() => {
    if (router) {
      const handleRouteChange = () => {
        api.start({ opacity: 0, scale: 0 });
      };

      router.events.on('routeChangeStart', handleRouteChange);

      return () => router.events.off('routeChangeStart', handleRouteChange);
    }
  }, [api, router]);

  return (
    <>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
      </Head>
          <Layout>
            <animated.div style={transition}>
              <Component {...pageProps} />
            </animated.div>
          </Layout>
    </>
  );
}

Edit: I fixed the issue by listening for routeChangeComplete (and routeChangeError in case an error or route load is cancelled) then setting the opacity to 1, but now there's another issue where I can only see the page transition animation in the first time the route loads then there's no animation between page transition;

export default function App({ Component, pageProps }: AppProps) {
 const router = useRouter();
  const [transition, api] = useSpring(() => ({
    from: { opacity: 0 },
    to: { opacity: 1 },
    delay: 1000,
  }));

  useEffect(() => {
    const handleRouteChangeStart = () => {
      api.start({ opacity: 0 });
    };

    const handleRouteChangeComplete = () => {
      api.start({ opacity: 1 });
    };

    const handleRouteChangeError = () => {
      api.start({ opacity: 1 });
    };

    router.events.on('routeChangeStart', handleRouteChangeStart);
    router.events.on('routeChangeComplete', handleRouteChangeComplete);
    router.events.on('routeChangeError', handleRouteChangeError);

    return () => {
      router.events.off('routeChangeStart', handleRouteChangeStart);
      router.events.off('routeChangeComplete', handleRouteChangeComplete);
      router.events.off('routeChangeError', handleRouteChangeError);
    };
  }, [api, router]);

  return (
    <>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
      </Head>
          <Layout>
            <animated.div style={transition}>
              <Component {...pageProps} />
            </animated.div>
          </Layout>
    </>
  );
}

sshmaxime · 2023-05-11T00:52:56Z

sshmaxime
May 11, 2023

This is really not an ideal way of handling transitions between routes. There should be some other ways. I found some CodeSandBox but they are outdated and I cannot managed to get it working. Could we have some insights or a codesandbox on how to handle transitions page with NextJs ? @joshuaellis Thank you 🙏

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Page transitions in Next.js? #2139

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment

{{title}}

Select a reply

Page transitions in Next.js? #2139

Mohammed-Mounir Apr 6, 2023

Replies: 1 comment

sshmaxime May 11, 2023

Mohammed-Mounir
Apr 6, 2023

sshmaxime
May 11, 2023